How to Show/Hide Widgets in Flutter programmatically?

How to Show/Hide Widgets in Flutter programmatically?

While going through many mobile applications you might have seen some Widgets are Visible only when the user presses a certain Button or Widget so we will be discussing how to achieve the same in a Flutter.

There are multiple ways to Show/Hide Widgets in a Flutter.

• Opacity Widget
• Visibility Widget
• Offstage Widget
• If- else Condition

Opacity Widget to Show/Hide Widget

You can use Opacity with an opacity: of 0.0 to make an element hidden but still occupy space.

To make it not occupy space, replace it with an empty Container Widget.

To wrap it in an Opacity, do the following:

 Opacity(
 opacity: 0.0, 
 child: new Padding(
 padding: const EdgeInsets.only(
 left: 16.0,
  ),
 child: Icon(
 pencil, 
 color: CupertinoColors.activeBlue,
 ),
 )
)

Using Visibility Widget

Now Flutter contains a Visibility Widget that you should use to show/hide widgets.

This Widget can achieve any of the state’s Visible, Invisible, Gone, and a lot more.

The following code snippet makes use of the Visibility Widget to Show/Hide Widgets in a Flutter.

bool _visible = false;

void _toggle() {
   setState(() {
     _visible = !_visible;
   });
 }

Visibility(
            visible:_visible,
            child: // Widget
          ),

Using Offstage Widget

Try the Offstage Widget

Depending on the type of offstage. If attribute offstage: true then it will not occupy the physical space and invisible, If attribute offstage: false it will occupy the physical space and visible.

Offstage(
   offstage: true,
   child: Text("Visible"),
),

Using If – Condition 

If – Condition to Show/Hide Widgets in a Flutter. The code snippet will look like below:

Define a variable like below:

bool isVisible = false;

Our If condition will have a code snippet like below:

isVisible?
           Widget1 
           :
           WIdget2

Conclusion:

So in this article, We have been through How to Show/Hide Widgets in Flutter.

Thanks for being with us. Keep Learning!!!

So now, Do let us know if you need any assistance with Flutter?!

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 portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.