Flutter: Programmatically show/hide a widget using Visibility

Last updated on December 7, 2020 A Goodman Loading... Post a comment

There may be times you want to programmatically show or hide a widget when developing Flutter applications. One of the best ways to achieve so is to use the Visibility widget.

Show/hide a widget using Visibility

In this article, we are going to take a look at the Visibility widget and go over an example of implementing it.

Options of Visibility

Below is the list of options supported by the Visibility widget:

OptionRequiredDefaultTypeDescription
childYesWidgetShow/hide a widget using Visibility
visibleOptionaltrueboolSwitches between showing the child or hiding it
replacementOptionala zero-sized boxWidgetThe widget that is displayed when the child is not visible
maintainStateOptionalfalseboolWhether to maintain the child’s state if it becomes not visible
maintainAnimationOptionalfalseboolWhether to maintain the child’s animations if it becomes not visible
maintainSizeOptionalfalseWhether to maintain space for where the widget would have been
maintainSemanticsOptionalfalseWhether to maintain the semantics for the widget when it is hidden
maintainInteractivityOptionalfalseWhether to allow the widget to be interactive when hidden

Example

This example creates a simple app that contains a floating button and an amber box. When users tap the button, the box will be visible or invisible based on a variable named _isShown.

Example preview:

The full code:

// main.dart
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      theme:
          ThemeData(primarySwatch: Colors.blue, accentColor: Colors.blueAccent),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  // The amber box is shown by default
  bool _isShown = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Center(
        child: Visibility(
          visible: _isShown,
          child: Container(
            width: 300,
            height: 300,
            color: Colors.amber,
            alignment: Alignment.center,
            child: Text('Hello!'),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isShown = !_isShown;
          });
        },
        child: Text(
          _isShown ? 'Hide' : 'Show',
        ),
      ),
    );
  }
}

Conclusion

This article demonstrated how to programmatically hide or show a widget in Flutter using the Visibility widget. If you want to learn more about Flutter, please check our Flutter category page for more tutorials and examples.

Related Articles

guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x