How to display icon on Image.network? I used the Stack widget, it does not help, the icon is under the image and it is not visible. I want my IconButton to be displayed on the image in the top right corner, but the Stack widget is not working for me.
SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(),
delegate: SliverChildBuilderDelegate(childCount: product.length,
(BuildContext context, int index) {
final media =
product[index].media?.map((e) => e.toJson()).toList();
final photo = media?[0]['links']['local']['thumbnails']['350'];
final productItem = product[index];
return GestureDetector(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProductScreen(
name: productItem.name,
link: productItem.link,
)));
},
child: Container(
padding: REdgeInsets.only(left: 2, right: 2, top: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8)),
child: Column(
children: <Widget>[
InkWell(
child: Container(
margin: REdgeInsets.only(top: 5),
child: Stack(
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.favorite),),
Image.network(),
]
),
),
),
SizedBox(
height: 10.h,
),
Text(),
SizedBox(height: 8.h),
Text(),
SizedBox(height: 5.h),
buildButton(index, productItem.id),
],
),
),
);
}),
),
>Solution :
Try the following code:
Stack(
children: [
Image.network(),
Align(
alignment: Alignment.topRight,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.favorite),
),
),
],
),