flutterflutter-animationflutter-update

icon at bottom right corner flutter


I want like this enter image description here

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

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