CODEWITHSUNDEEP
flutterdart
Yana Krivitskaya
Yana Krivitskaya

Reputation: 15

Flutter - Issue with Container size when using BoxDecoration

I'm trying to create color overlay for Image to make it a bit gray. I'm using the following code:

                    Container(
                      padding: EdgeInsets.only(bottom: 20.0),                                          
                      decoration: new BoxDecoration(
                        color: const Color(0xff7c94b6),
                        image: new DecorationImage(
                          fit: BoxFit.fitWidth,
                          colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),
                          image: new AssetImage("assets/sunset.jpg"),
                        ),
                      ),                                    
                    )

However without a Container child, color overlay takes all the screen.

[Result is the following][1]

I expect the Image to be on Top with overlay on Image only [like this but with overlay][2]

Any thoughts, what am I'm missing? [1]: https://i.sstatic.net/ifPEu.png [2]: https://i.sstatic.net/4P0Cb.png

Upvotes: 1

Views: 381

Answers (1)

JayJay
JayJay

Reputation: 141

The overlay is over the whole screen because the Container has no constraints and therefore the parent's constraints (which in your case probably the screen size) are being used. When Container has a child, it uses its constraints.

The Column is not really necessary but if you want to have the image stuck to the top I assume you want to add other stuff below.

 Column(
    children:[
       Container(
          child: Image.asset(
          "assets/images/sunset.JPG",
          colorBlendMode: BlendMode.dstATop,
          color: Colors.black.withOpacity(0.2),
          ),
       decoration: BoxDecoration(
          color: const Color(0xff7c94b6),
          ),
        ),
      ],
    )

Upvotes: 1

Related Questions