Flutter Container with Network Image and an Aligned Container at the bottom

Question

So, I have to display an image in a container and some description at the bottom of the container. The image is supposed to fill the entire screen. The image is being fetched from the network.

This is my intial approach

  Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Container(
        child: ClipRRect(
          child: Image.network(category.imageURL,
              height: maxHeight * 1, fit: BoxFit.cover),
        ),
      ),
      Align(
        alignment: Alignment.bottomLeft,
        child: getNameAndDeleteSection(context),
      )
    ],
  ),
),

where getNameAndDeleteSection is basically this

 return Container(
      color: Colors.yellow,
      margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            category.name,
            maxLines: 1,
            style: TextStyle(color: Colors.white),
          ),
          Spacer(),
          IconButton(
            icon: Icon(Icons.delete, size: 18.0, color: Colors.white,),
            onPressed: () {
              deleteTap(category);
            },
          )
        ],
      ),
    );
  }

When the network image is loaded, it hides the yellow container , but keeps the children. What I want is the image to remain at the background and the yellow container to remain above it. The idea is that the yellow container will have a transparent color of sorts , to make it look floating on the image.

The max height is the height provided by the listView. I'm trying to make the UI adaptive. Any help?

score 0 · Answer 1 · answered Feb 12 '20 at 16:38

0

Why not puting your image as a BoxDecoration in your container like this:

Stack(
   children: <Widget>[
      Container(
         decoration: BoxDecoration(
            image: DecorationImage(
               image: NetworkImage(url), fit: BoxFit.cover,
            ),
         ),
      ),
      Align(
         alignment: Alignment.bottomLeft,
         child: getNameAndDeleteSection(context),
      )
   ],
),

answered Feb 12 '20 at 16:38

Guillaume Roux

6,352
1
13
38

Even then the image would cover the yellow container leaving the text to float bate on the image itself. I want the image as backdrop, a small padded container with a specific colour at the bottom to contain the texts. – Debanjan Chakraborty Feb 13 '20 at 02:20

score 0 · Answer 2 · answered Feb 13 '20 at 05:21

Instead of using a Container that always seems to get hidden by the Network Image, I decided to use Card that will envelop the container. And it worked.

So, the change was done in the getNameAndDeleteSection and basically wrapped the entire code in a Card. And bingo, it worked.

Flutter Container with Network Image and an Aligned Container at the bottom

2 Answers2