How to put opacity for container in flutter

Question

I want to put opacity for container which contain hexadecimal color code. How can it be done?

Here is my current code:

final body = Container(
  width: MediaQuery.of(context).size.width,

  margin: const EdgeInsets.only(left: 40.0, right: 40.0),
  padding: EdgeInsets.all(28.0),
   decoration: new BoxDecoration(
     color:   const Color(0xFF0E3311),//here i want to add opacity

   border: new Border.all(color: Colors.black54,
   ),
       borderRadius: new BorderRadius.only(
           topLeft: const Radius.circular(40.0),
           topRight: const Radius.circular(40.0),
       bottomLeft: const Radius.circular(40.0),
       bottomRight:const Radius.circular(40.0) )
),

  child: Column(
    children: <Widget>[ email, password,loginButton],
  ),
);

score 161 · Accepted Answer · answered Mar 22 '19 at 07:42

161

Change the line

const Color(0xFF0E3311)

to

const Color(0xFF0E3311).withOpacity(0.5)

or any value you want.

answered Mar 22 '19 at 07:42

Ryosuke

3,592
1
11
28

1

We should use while giving the background in constructor like the following "backgroundColor: Colors.black.withOpacity(0.5)," Otherwise it will show a compilation error message. – Raghu Mudem Mar 20 '20 at 11:26

score 43 · Answer 2 · answered Mar 22 '19 at 07:51

If you just want to set an opacity to your color it's simple as adding 2 hex numbers before your color code. Check this answer to know all the values.

But if you want to change the opacity of all the widget, in your case a Container, you can wrap it into a Opacity widget like this:

double _opacityValue = 0.50;//This value goes from 0.0 to 1.0. In this case the opacity is from 50%

final Widget _bodyWithOpacity = Opacity(
  opacity: _opacityValue,
  child: body,
);

Check here the Opacity's documentation and this quick video if you want to know more about it!

score 15 · Answer 3 · edited Oct 11 '21 at 12:14

Flutter uses hexadecimal ARGB values for colors, which are formatted as const Color(0xAARRGGBB). That first pair of letters, the AA, represent the alpha channel. You must convert your decimal opacity values to a hexadecimal value.

Hex Opacity Values:

100% — FF
95% — F2
90% — E6
85% — D9
80% — CC
75% — BF
70% — B3
65% — A6
60% — 99
55% — 8C
50% — 80
45% — 73
40% — 66
35% — 59
30% — 4D
25% — 40
20% — 33
15% — 26
10% — 1A
5% — 0D
0% — 00

For instance:

static const Color mainColor = Color(0xff0097A7);

to:

static  Color accentColor = Color(0x1A0097A7);

will change the opacity to 10%.

score 4 · Answer 4 · answered Dec 11 '20 at 05:54

4

We can use Color.fromRGBO(255, 255, 255, 0.5) for opacity as well.

answered Dec 11 '20 at 05:54

Dennis

461
4
4

score 3 · Answer 5 · answered Mar 22 '19 at 07:30

Flutter uses a 32 bit color value in ARGB format, where A = Alpha, R = RED, G = GREEN and B = BLUE.

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.

Hope that helps!

score 1 · Answer 6 · answered Mar 22 '19 at 10:21

here in code const Color(0xFF0E3311) after 0x two values (in above code 'FF') are for opacity. 'FF' for opaque and '00' for fully transparent. so by altering this value you can change color opacity. Also we get by Colors class diff opacity value color for white and black. for example Colors.white70 means white color with 70% opacity

How to put opacity for container in flutter

6 Answers6

Linked