How to overlay Icon on image in flutter

Viewed 24760

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.

3 Answers

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

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

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:

Icon overlay image

Related