icon at bottom right corner flutter

July 5, 2023

I want like this

my code

SizedBox(
height: 150,
width: 100,
child: Card(
elevation: 2,
semanticContainer: true,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: Container(
decoration: BoxDecoration(
color:Color(0xffffffff) ,
borderRadius: BorderRadius.circular(20)
),
child: Stack(
children: [
Column(
children: [
Image.network(‘https://vipspar.com/wp-content/uploads/2021/12/6152-480×480.jpg’),
Text(‘Cornflacks’),
Text(‘MT 215’),
],
),
Positioned(
right: -2,
bottom: -20,
child: Container(
height: 50,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xffEAEFF2)
),
child: Center(
child: IconButton(onPressed: () {

                                 }, icon: Icon(Icons.favorite_border)),
                                       ),
                                     ))
                               ],
                             ),
                           ),
                         ),
                       );

>Solution :

you can align icon at bottom corner via this :

Stack(
  children: [
    SizedBox(
      height: 150,
      width: 100,
      child: Card(
        elevation: 2,
        semanticContainer: true,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        child: Container(
          decoration: BoxDecoration(
            color: Color(0xFFFFFFFF),
            borderRadius: BorderRadius.circular(20),
          ),
          child: Column(
            children: [
              Image.network('https://vipspar.com/wp-content/uploads/2021/12/6152-480x480.jpg'),
              Text('Cornflakes'),
              Text('MT 215'),
            ],
          ),
        ),
      ),
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: Container(
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Color(0xFFEAEFF2),
        ),
        child: IconButton(
          onPressed: () {
            // Add your onPressed logic here
          },
          icon: Icon(Icons.favorite_border),
        ),
      ),
    ),
  ],
);