Question 200769 in Flutter Question posted in
The official Flutter documentation can be found here.

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

2

Answers


  1. 0

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

    Stack(
    clipBehavior: Clip.none,
// rest of your code 
),
    Login or Signup to reply.
  2. 0

    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),
        ),
      ),
    ),
  ],
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search