Flutter Visibility Widget Example

Last updated Nov 03, 2021


In Flutter, the Visibility Widget is used to show or hide a child/widget. By default, the visible property controls whether the child is included in the subtree or not; when it is not visible, the replacement child (typically a zero-sized box) is included instead.

So, In this tutorial, we will see a simple example Let's start

Step 1: Create a new Flutter Application.

Step 2: Declare a bool variable that will be used to change the visibility in your stateful widget. for example 

 bool isVisible = false;

Step 3: Now we can use Visibility widget in our app, simply use this widget where you want to hide/show other widget also it has different properties such as

 

  • visible
  • replacement
  • maintainState 
  • maintainAnimation
  • maintainSemantics
  • maintainInteractivity

visible: property will have our bool variable

child: property will have the widget that is visible if the value is true

replacement: property will be the widget that is displayed when the child widget is hidden 

for example: 

Visibility(

              visible: isVisible,

              child: SizedBox(

                height: 200,

                width: 200,

                child: Image.asset('assets/splashscreen.png'),

              ),

              replacement: Container(

                height: 200,

                width: 300,

                color: Colors.red,

              ),

            )

 

 

Full Source Code to implement Widget visibility invisibility

import 'package:flutter/material.dart';

 

void main() {

  runApp(MaterialApp(

    home: MyApp(),

  ));

}

 

class MyApp extends StatefulWidget {

  @override

  _State createState() => _State();

}

 

class _State extends State {

  bool isVisible = false;

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

        appBar: AppBar(

          title: const Text('Flutter Switch'),

        ),

        body: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Center(

              child: Text(

                isVisible ? 'Visible widget One' : 'Visible widget Two',

                style: TextStyle(fontSize: 40, color: Colors.blueGrey.shade900),

              ),

            ),

            const SizedBox(

              height: 20,

            ),

            Center(

                child: Visibility(

              visible: isVisible,

              child: SizedBox(

                height: 200,

                width: 200,

                child: Image.asset('assets/splashscreen.png'),

              ),

              replacement: Container(

                height: 200,

                width: 300,

                color: Colors.red,

              ),

            )),

            const SizedBox(

              height: 20,

            ),

            ElevatedButton(

                onPressed: () {

                  setState(() {

                    isVisible = !isVisible;

                  });

                },

                child: const Text('Change Visibility'))

          ],

        ));

  }

}

 

 

Output:

 

Video Tutorial 

 

Conclusion: In this tutorial, we learned how you can use the visibility widget to show/hide any widget in Flutter.

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

27 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions