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

CodePudding user response：

Try the following code:

Stack(
  children: [
    Image.network(),
    Align(
      alignment: Alignment.topRight,
      child: IconButton(
        onPressed: () {},
        icon: Icon(Icons.favorite),
      ),
    ),
  ],
),

CodePudding user response：

A simple change of stack should be able to help you out with problem. Put the Image.network() before the IconButton() as follows:

    Stack(
      children: [
        Image.network(),
        IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
      ],),

Another alternate solution can be to add the image as a background image to the container. That solution will be as follows:

    Container(
      margin: EdgeInsets.only(top: 5),
       decoration: const BoxDecoration(
         image: DecorationImage(
           image: NetworkImage('https://sample.png'),
         ),
        ),
        child: IconButton(
          onPressed: () {},
          icon: const Icon(Icons.favorite),
        ),
      ),