Flutter Example- Hide / Show Widget Using Visibility

In the dynamic world of app development, the ability to control the visibility of widgets based on certain conditions is essential. With 5 years of experience in Flutter development, I, Nilesh Payghan, bring you a comprehensive guide on leveraging the Visibility widget in Flutter to show or hide widgets seamlessly.

Introduction to the Visibility Widget

Flutter’s framework simplifies the process of making widgets appear or disappear under specific conditions through the Visibility widget. This functionality is particularly useful in creating dynamic and interactive user interfaces.

Join Our Whatsapp Group

Join Telegram group

Utilizing the Visibility Widget

To use the Visibility widget, encapsulate the widget you intend to show or hide within the Visibility widget. It requires a boolean value passed to the visible property, which determines the widget’s visibility. This boolean value is typically managed in the widget’s state, allowing you to dynamically show or hide the widget based on user interactions or other conditions.

Practical Example: Toggling Widget Visibility

Consider an example where you have a UI with three Card widgets, and you wish to toggle the visibility of the second Card (B) based on a button press. Here’s how you can achieve this:

import 'package:flutter/material.dart';

class VisibilityExample extends StatefulWidget {
  @override
  _VisibilityExampleState createState() => _VisibilityExampleState();
}

class _VisibilityExampleState extends State<VisibilityExample> {
  bool _isVisible = true;

  void toggleVisibility() {
    setState(() {
      _isVisible = !_isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Visibility Control Example'),
        ),
        body: Padding(
          padding: EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              RaisedButton(
                onPressed: toggleVisibility,
                child: Text('Show/Hide Card B'),
              ),
              Card(
                child: ListTile(
                  title: Center(child: Text('A')),
                ),
              ),
              Visibility(
                visible: _isVisible,
                child: Card(
                  child: ListTile(
                    title: Center(child: Text('B')),
                  ),
                ),
              ),
              Card(
                child: ListTile(
                  title: Center(child: Text('C')),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() => runApp(VisibilityExample());

In this example, pressing the button toggles the visibility of Card B, demonstrating how the Visibility widget can be employed to create a dynamic user interface.

Join Our Whatsapp Group

Join Telegram group

Advanced Visibility Control

The Visibility widget also allows for advanced control over the widget’s state, including maintaining the widget’s state, size, and semantics when it is not visible. For example, using the replacement property, you can display an alternative widget when the primary widget is hidden:

Visibility(
  visible: _isVisible,
  child: Card(
    child: ListTile(
      title: Center(child: Text('B')),
    ),
  ),
  replacement: Card(
    child: ListTile(
      title: Center(child: Text('B replacement')),
    ),
  ),
),

Conclusion

Flutter’s Visibility widget offers a straightforward yet powerful way to control widget display based on specific conditions. By incorporating this widget into your Flutter applications, you can enhance user interaction and the overall user experience. Remember, the key to mastering Flutter development lies in understanding and effectively using such versatile widgets.

Mastering Visibility in Flutter: FAQs by Nilesh Payghan

What is the Visibility Widget in Flutter?

The Visibility widget in Flutter is a powerful UI tool designed to control the visibility of widgets in your application. By simply wrapping any widget with the Visibility widget and setting its boolean visible property, developers can programmatically show or hide elements of their UI. This feature is crucial for creating dynamic and interactive user interfaces that react to user interactions or certain conditions within the app.

How Do I Use the Visibility Widget?

To use the Visibility widget, wrap the widget you want to control with a Visibility widget. Then, pass a boolean value to the visible property of the Visibility widget. This boolean value typically comes from the app’s state, allowing for dynamic changes to the widget’s visibility. Here’s a simple code snippet to illustrate:

Visibility(
  visible: _isVisible, // a boolean variable from your state
  child: YourWidget(), // the widget you want to show or hide
),

Can I Toggle a Widget’s Visibility?

Yes, toggling a widget’s visibility is straightforward with the Visibility widget. This is done by changing the boolean value assigned to the visible property of the Visibility widget. A common practice is to use a button or some other user interaction to trigger a state change that updates this boolean value, effectively toggling the visibility of the widget.

What Happens to the Widget Space When It’s Invisible?

By default, when a widget is made invisible using the Visibility widget, it is removed from the layout, and its space is collapsed. This means that other widgets will move to fill up the space that the invisible widget previously occupied. However, Flutter’s Visibility widget offers properties to maintain the space, state, and other aspects of the widget even when it’s not visible, according to your needs.

Is There a Way to Show a Different Widget When Another Widget is Invisible?

Yes, the Visibility widget provides a replacement property that allows you to display an alternative widget when the primary widget is set to invisible. This is particularly useful for placeholders, loading indicators, or any other content you wish to display in place of the hidden widget. Here’s how you can use it:

Visibility(
  visible: _isVisible,
  child: YourPrimaryWidget(),
  replacement: YourReplacementWidget(), // shown when YourPrimaryWidget is invisible
),

Can the Visibility Widget Affect the Widget’s State and Animations?

The Visibility widget includes several properties to control the maintenance of the widget’s state, size, animations, semantics, and interactivity when it is not visible. For instance, setting maintainState to true allows the widget to maintain its state even when it is not visible. These properties provide flexibility in managing how invisible widgets behave and interact within your app.