icon at bottom right corner flutter

Question

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-480x480.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)),
                                           ),
                                         ))
                                   ],
                                 ),
                               ),
                             ),
                           );

Answer 1

You can refer to the below code:

 SizedBox(
      height: 150,
      width: 100,
      child: Stack(
        children: [
          Card(
            elevation: 2,
            semanticContainer: true,
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20)),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Image.network(
                      'https://vipspar.com/wp-content/uploads/2021/12/6152-480x480.jpg'),
                  const Text('Cornflacks'),
                  const Text('MT 215'),
                ],
              ),
            ),
          ),
          Align(
              alignment: Alignment.bottomRight,
              child: Container(
                height: 30,
                width: 32,
                decoration: const BoxDecoration(
                    shape: BoxShape.circle, color: Color(0xffEAEFF2)),
                child: Center(
                  child: IconButton(
                      onPressed: () {},
                      icon: const Icon(Icons.favorite_border, size: 18,)),
                ),
              ))
        ],
      ),
    ),

Answer 2

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),
        ),
      ),
    ),
  ],
);

Answer 3

change clipBehavior property of stack to Clip.none like bellow this will work for you

Stack(
    clipBehavior: Clip.none,
// rest of your code 
),