Question 77830 in Flutter Question posted in
The official Flutter documentation can be found here.

How to create an image overlay which match the size of the image? – Flutter

I’m trying to create an overlay above an image, which should match the size of the image no matter which size I give the Container.

This is my code I tried so far.

Container(
                     width: double.infinity,
                     height: double.infinity,
                     color: Colors.red,
                        child: Stack(
                          children: [
                            Image.memory(
                              snapshot.data!,
                              fit: BoxFit.contain,
                            ),
                            Positioned.fill(
                              child: Container(
                                color: Colors.grey.withOpacity(0.5),
                              ),
                            ),
                          ],
                        ),
                      ),

This results to this image (https://i.stack.imgur.com/eL3Ig.png)
I expect that the grey overlay matches the size of the image.

Tags:

2

Answers


  1. 0

    Give your Stack a fit: Stackfit.expand, so it expands to the Container size.

    If this doesn’t work you can try it with a BoxDecoration – found here https://medium.com/ariel-mejia-dev/make-an-image-with-opacity-layer-in-flutter-fca77e453731

    decoration:
BoxDecoration(
  color: const Color(0xff7c94b6),
  image: new DecorationImage(
    fit: BoxFit.cover,
    colorFilter: 
      ColorFilter.mode(Colors.black.withOpacity(0.2), 
      BlendMode.dstATop),
    image: new NetworkImage(
      'http://www.server.com/image.jpg',
    ),
  ),
),
    Login or Signup to reply.
  2. 0

    Move the Stack into a FittedBox:

    Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.red,
              child: FittedBox(
                child: Stack(
                  children: [
                    Image.asset(
                      'images/default.png',
                    ),
                    Positioned.fill(
                      child: Container(
                        color: Colors.grey.withOpacity(0.5),
                        child: const Center(
                          child: Text('Overlay'),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search