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.
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.
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.
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.
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:
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),
),
],
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With