Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to put opacity for container in flutter

I want to put opacity for container which contain hexadecimal color code. I am new to flutter. Please help me. Here is the code. Thanks in advance.

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],
  ),
);
like image 975
Pritham Bnr Avatar asked Mar 22 '19 07:03

Pritham Bnr


People also ask

How do you make a widget Flutter transparent?

Surround the widget which you want to change the opacity and the container with Stack widget. Then wrap the widget which you want to change the opacity with Opacity widget and mention required opacity. Show activity on this post. Simply make the main container background decoration an opaque color.

How do you color containers in Flutter?

Flutter – Change Container Border's Color & Width To change the color and width of Container's border, use its decoration property. Set decoration property with BoxDecoration() object. Set the border property of BoxDecoration() object, with required color and width as per your applications specifications.

How to make the child partially transparent in flutter?

Flutter’s Opacity widget makes its child partially transparent. You can choose a value between 0.0 and 1.0 to define the opacity of a widget. Opacity ( opacity: 0.5, child: Container ( color: Colors.red, width: 200, height: 200, ), ),

What is opacity widget in flutter?

Opacity Widget in Flutter Last Updated : 02 Sep, 2020 The Opacity widget that makes its child partially transparent. This class colors its child into an intermediate buffer and then merges the child back into the scene partially transparent.

How to change the opacity of a container widget?

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, );

How to change opacity of colors in flutter?

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.


Video Answer


3 Answers

Change the line

const Color(0xFF0E3311)

to

const Color(0xFF0E3311).withOpacity(0.5)

or any value you want.

like image 149
Ryosuke Avatar answered Oct 17 '22 17:10

Ryosuke


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!

like image 26
David Benitez Riba Avatar answered Oct 17 '22 18:10

David Benitez Riba


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%.

like image 11
Sleman Kamel Avatar answered Oct 17 '22 19:10

Sleman Kamel