Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to overlay Icon on image in flutter

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.

like image 427
Haseeb Ahmad Avatar asked May 20 '20 08:05

Haseeb Ahmad


People also ask

How do I add an icon to an image Flutter?

You can use Icon() widget to add icons to your Flutter App. You have to pass the icon data as an icon to this widget. You can use default available Material icons with Icons class.

How do you show the overlay in Flutter?

You use OverlayState to insert OverlayEntry s into the Overlay widget using the insert and insertAll functions. Note: Overlay 's main use case is related to being able to insert widgets on top of the pages in an app, as opposed to Stack , that simply displays a stack of widgets.

How do I overlay text on an image in Flutter?

This is very often used in every application where we have to draw text over an image. To tackle this thing Flutter have Stack Widget, It used to arrange widgets on top of a base widget ften an image. The widgets can completely or partially overlap the base widget.


2 Answers

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

like image 124
Muhamad Haydar Jawad Avatar answered Oct 14 '22 05:10

Muhamad Haydar Jawad


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),
        ),
     ],
  ),
),
like image 27
srikanth7785 Avatar answered Oct 14 '22 04:10

srikanth7785