×
×

Spread the love

In flutter we can show or hide widgets using visibility widget. While designing mobile apps using flutter we might have to show or hide a widget based on some condition. For example, we will implement this kind of behavior while designing social networking apps. This feature comes in handy to control whether to show or hide the profile info.

Flutter Visibility Widget

Visibility is a widget that is useful to show or hide other widgets in flutter. We have to wrap the widget we want to show or hide inside the visibility widget as a child. This widget has a property called visible which controls the state (visible or invisible) of the child. Instead of hiding the child, we can also replace it with another widget. This widget gives us control over whether to maintain the space for the widget when it gets invisible.

In this tutorial, we will learn how to use a visibility widget to show or hide widgets in flutter with example. We will also learn how to customize the style of the Visibility widget using different properties.

How To Create Visibility Widget In Flutter ?

To create a visibility widget in flutter we have to use Visibility class. We have to call the constructor of the class and provide the required properties. The visibility widget has one required property child. The child can be any widget. We can use the remaining properties to customize the style and behavior based on our requirements.

Flutter Visibility Constructor:

Visibility(
{Key? key, 
 required Widget child, 
 Widget replacement, 
 bool visible, 
 bool maintainState, 
 bool maintainAnimation, 
 bool maintainSize, 
 bool maintainSemantics, 
 bool maintainInteractivity}
) 

Flutter Visibility Widget Properties

The propertis of visibility widget are:

  • child
  • replacement
  • visible
  • maintainSize
  • maintainInteractivity
  • maintainState
  • maintainAnimation
  • maintainSemantics

child

The widget we want to show or hide will be the child. It can be any widget.

Visibility(
              child:Image.asset("assets/images/burger.jpg")
            )

Output:

flutter visibility widget child

visible

This takes boolean as value. It controls whether to show or hide the child widget. By default the value is true.

Visibility(
              child:Image.asset("assets/images/burger.jpg"),
              visible: false,
            )

Output:

flutter visibility widget visible false

replacement

We will use this property to replace the child with another widget instead when visible is false. By default the value is false.

Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: false,
                  replacement: Image.asset("assets/images/pizza.jpg"),
                ),

Output:

flutter visibility widget replacement

maintainState

We will use this property to control whether to maintain state objects of the child when it is hidden. It takes boolean as value. By default the value is false.

Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: false,
                  maintainState: true,
                ),

maintainAnimation

It takes boolean as value. We will use this property to control whether to maintain the animations of the child when it is hidden. By default the value is false.

Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: false,
                  maintainState: true,
                  maintainAnimation:tue,
                ),

maintainSize

We will use this property to control wheter or not to maintain the space after the child is hidden. It takes boolean as value. If we set this to true it will hide the widget but will maintain the space of that widget. If false it will not maintain the space for that widget. For this we have to set both maintainState and maintainAnimation properties to true. By default the value is false.

true

Column(
              children: [
                Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: false,
                  maintainSize: true,
                  maintainAnimation: true,
                  maintainState: true,
                ),
                SizedBox(
                  height:20
                ),
                Text("Example Text")
              ],
            )

Output:

flutter visibility widget maintain size true

false

Column(
              children: [
                Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: false,
                  maintainSize: false,
                  maintainAnimation: true,
                  maintainState: true,
                ),
                SizedBox(
                  height:20
                ),
                Text("Example Text")
              ],
            )

Output:

flutter visibility widget maintain size false

maintainInteractivity

We will use this property to control whether to maintain interactivity when the child is hidden. It takes boolean as value. If set to true the child will respond to touch event (if any) even when it is hidden. If false it will not respond to touch event. The maintainState, maintainAnimation, and maintainSize properties must be true for this property to work. By default the value is false.

Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: false,
                  maintainSize: true,
                  maintainAnimation: true,
                  maintainState: true,
                  maintainInteractivity: true
                ),

maintainSemantics

It takes boolean as value. We will use this property to control whether to maintain semantics of the child when it is hidden. We have to set maintainState, maintainAnimation, and maintainSize properties to true for this property to work. By default the value is false.

Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: false,
                  maintainSize: true,
                  maintainAnimation: true,
                  maintainState: true,
                  maintainSemantics:true
                ),

Flutter Show or Hide Widget Example Using Visibility Widget

Let’s create an example where we will show or hide a widget using visibility widget in flutter. In this example, we will display a switch and an image. Toggling the switch will show and hide the image. For this purpose, we will need two boolean variables. One will hold the state of the switch and the other will hold the state of the child.

Declare the variables switchValue and isVisible.

bool switchValue = false;
bool isVisible = true;

Implement the code for displaying the switch and the visibility widget with an image as a child. Wrap the switch and the visibility widget inside a column widget. Provide switchValue variable to value property of the switch and isVisible variable to visible property of visibility widget.

body:Container(
            margin: EdgeInsets.all(0),
            width: double.infinity,
            height: MediaQuery.of(context).size.height*0.50,
            child: Column(
              children: [
                Switch(
                    value: switchValue,
                    onChanged: (value) {
                      
                    },
                ),
                Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible:isVisible,
                ),
              ],
            )
        ),

Inside onChanged callback of the switch widget update the values of switchValue and isVisible variables. Call setState to update the UI with the changes.

Switch(
                    value: switchValue,
                    onChanged: (value) {
                      switchValue = value;
                      isVisible = !isVisible;
                      setState(() {

                      });
                    },
                ),

Complete Code

Let’s complete our example about how to show or hide a widget using the visibility widget in flutter by summing up the code snippets above. Create a new flutter project and replace the code in main.dart file with the code below.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

void main()
{
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Learning',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState()
  {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {
  bool switchValue = false;
  bool isVisible = true;
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          title: Text("Flutter show or hide widgets"),
        ),
        body:Container(
            margin: EdgeInsets.all(0),
            width: double.infinity,
            height: MediaQuery.of(context).size.height*0.50,
            child: Column(
              children: [
                Switch(
                    value: switchValue,
                    onChanged: (value) {
                      switchValue = value;
                      isVisible = !isVisible;
                      setState(() {

                      });
                    },
                ),
                Visibility(
                  child:Image.asset("assets/images/burger.jpg"),
                  visible: isVisible,
                ),
              ],
            )
        ),
    );
  }
}

Output:

flutter hide or show widget using visibility example output

I hope you understand the tutorial on how to create & use Visibility widget to show or hide a widget in flutter. We have also seen an example where we have used the Visibility widget and customized its style. Let’s catch up with some other widgets in the next post. Have a great day !!

Do like & share my Facebook page. Subscribe to the newsletter if you find this post helpful. Thank you !!

Reference: Flutter Official Documentation.


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *