How to overlay Icon on image in flutter

Question

I have to show a favourite icon on bottom right corner of image.

Container(
   decoration: new BoxDecoration(color: Colors.white),
   alignment: Alignment.center,
   height: 240,
   child: Image.network(used_car.imageUrl,fit: BoxFit.fill) 
)

I want to show an icon Icon.favorite on bottom right of this image container. But not find any flutter property to fix that or show that.

refer this https://stackoverflow.com/a/61123046/5106574 – Jitesh Mohite May 20 '20 at 09:20 — Jitesh Mohite, May 20 '20 at 09:20

score 25 · Accepted Answer · answered May 20 '20 at 09:10

25

You can wrap it into Stack:

Stack(
  children: <Widget>[
    Container(
        decoration: new BoxDecoration(color: Colors.white),
        alignment: Alignment.center,
        height: 240,
        child: Image.network(used_car.imageUrl,fit: BoxFit.fill)
    ),
    Align(
      alignment: Alignment.bottomRight,
      child: Icon(Icons.favorite),
    )
  ],
)

answered May 20 '20 at 09:10

Kirill Bubochkin

5,868
2
31
50

1

For `Stack`, adding `alignment: Alignment.center` was necessary in my case to get *Alignment.bottomRight* to work for vertical space https://stackoverflow.com/a/60990352/2162226 – Gene Bo Jul 27 '21 at 18:47

score 15 · Answer 2 · answered May 20 '20 at 09:22

You can do it better using Positioned widget..in the Stack.

Container(
   decoration: new BoxDecoration(color: Colors.white),
   height: 240,
   child: Stack(
     children: <Widget>[
        Image.network(used_car.imageUrl,fit: BoxFit.fill),
        Positioned(
          bottom: 15, right: 15, //give the values according to your requirement
          child: Icon(Icons.favorite),
        ),
     ],
  ),
),

score 11 · Answer 3 · edited Jun 11 '21 at 09:05

Here is another kind of solution for icon overlay:

Container(
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          padding: EdgeInsets.all(10),
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius:BorderRadius.circular(100)
          ),
          child: Icon(
            Icons.edit,
            color: Colors.white,
          ),
        ),
      ),
      height: MediaQuery.of(context).size.width - 220,
      width: MediaQuery.of(context).size.width - 220,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100),
          image: DecorationImage(
            image: AssetImage(
              'assets/images/image.jpg'
            ),
            fit: BoxFit.cover
          ),
      ),
    ),
  ),

The result is:

How to overlay Icon on image in flutter

3 Answers3