Opacity Widget – Flutter Widget Guide By Flutter Agency

· 3 min read
Opacity Widget - Flutter Widget Guide By Flutter Agency
Opacity Widget - Flutter Widget Guide By Flutter Agency

What is the Opacity Widget in Flutter?

Opacity Widget is a simple property that can have huge effects on the user interface of a mobile app. For example, a button with less opacity makes the user convince that the button is disabled. In this article, we will go through how the opacity of widgets is changed in Flutter.

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.

The default constructor for it will look like below :

 Opacity({
    Key key,
    @required double opacity,
    bool alwaysIncludeSemantics: false,
    Widget child,
  });

In Above Constructor all fields marked with @required must not be empty.

Properties:

  • key: The Opacity Widget’s key.

  • opacity: The alpha value of the child.

  • alwaysIncludeSemantics: Whether the semantic information of the children is always included.

  • Widget child: This attribute is used to define the widget below this widget in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row WidgetColumn Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.

How to use the Opacity Widget in Flutter?

The following code snippet tells us how to implement Opacity Widget in Flutter.

Opacity(
          opacity: 0.5,
          child: Container(
            color: Colors.cyan,
          width: 200,
          height: 200,
  ),
        ),

In Above Example we have used a Container Widget. we will get output like below:

Opacity

Opacity 

Opacity value can be applied like the code snippet below :

 opacity: 0.5,

The opacity value must be between 0.0 and 1.0 (inclusive). At value 0.0, the child looks invisible transparency is 100%. At 1.0, the transparency is 0%.

Conclusion:

In this article, we have been through What is Opacity Widget in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply