Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter opacity on image within container

I couldn't find a way to make this image within a container opaque.

Container(
      margin: EdgeInsets.symmetric(
          vertical: 12, horizontal: 8),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(40),
        image: DecorationImage(
            image: AssetImage("images/img.png"),
            fit: BoxFit.scaleDown),
      ),
      child: SomeWidget(),
    )
like image 904
Hasen Avatar asked Jul 26 '19 11:07

Hasen


People also ask

How do you add opacity to a container?

So to control the opacity you can change the values of first two digits of the hex value in const Color(0xFF0E3311) , you can use values ranging from 0x000E3311 , 0x010E3311 .... 0xFF0E3311 .


2 Answers

As you are using DecorationImage and it has a method colorFilter you can use it for the opacity

Here is the sample how I am using it in my code.

colorFilter: new ColorFilter.mode(Colors.black.withOpacity(0.2), BlendMode.dstATop),

And you can also use this

like image 70
Sunny Avatar answered Sep 22 '22 12:09

Sunny


Inside a container's decoration section, just like sunny's answer above but instead of Colors.black use Colors.white:

              Container(
                  decoration: BoxDecoration(
                      image: new DecorationImage(
                    image: new AssetImage("assets/images/tankicon.png"),
                    fit: BoxFit.scaleDown,
                    colorFilter: ColorFilter.mode(
                        Colors.white.withOpacity(0.2), BlendMode.dstATop),
                  )),
                  child: 
like image 22
Amogh Jain Avatar answered Sep 23 '22 12:09

Amogh Jain