A Comprehensive Guide to Programmatically Showing/Hiding Widgets in Flutter

Widget Visibility Control in Flutter

In Android development, the View class provides the setVisibility() method to control view visibility, including VISIBLE, INVISIBLE, and GONE states. Flutter, as a cross-platform framework, offers multiple equivalent implementations, with the Visibility Widget being the most direct and recommended solution.

Core Features of the Visibility Widget

The Visibility Widget is a specialized component in Flutter designed to control the visibility of child Widgets, providing flexible configuration options to emulate various visibility states from Android.

Implementing INVISIBLE Equivalent

To achieve the effect of Android's INVISIBLE (hiding the Widget while preserving its layout space), use the following configuration:

Visibility(
  child: Text("Invisible Text"),
  maintainSize: true,
  maintainAnimation: true,
  maintainState: true,
  visible: false,
)

In this example, when visible is set to false, the Text Widget is hidden, but due to maintainSize, maintainAnimation, and maintainState all being true, the Widget still occupies the same space in the layout, with animations and state preserved.

Implementing GONE Equivalent

To achieve the effect of Android's GONE (completely removing the Widget without occupying any layout space), use a simplified configuration:

Visibility(
  child: Text("Gone Text"),
  visible: false,
)

In this configuration, when visible is false, the Text Widget is not only invisible but also completely removed from the layout, occupying no space.

Alternative Approach: Conditional Rendering

Beyond the Visibility Widget, Flutter supports dynamic Widget display and hiding through Dart language conditional statements.

Using if Statements

For conditional display of a single Widget:

Column(
  children: <Widget>[
    Text('Always Visible Text'),
    if (shouldShowExtra) Text('Conditionally Visible Text'),
  ],
)

For conditional display of multiple Widgets:

Column(
  children: [
    Text('Always Visible Text'),
    if (showMultiple) ... [
      Text('First Conditional Text'),
      Text('Second Conditional Text'),
      Text('Third Conditional Text'),
    ],
  ],
)

Using if-else Statements

Implementing mutually exclusive display scenarios:

Column(
  children: <Widget>[
    if (isDaytime) Text('Daytime Greeting')
    else Text('Evening Greeting'),
  ],
)

For complex mutually exclusive displays:

Column(
  children: [
    if (isMorning) ... [
      Text('Good Morning'),
      Text('Have a Great Day'),
    ] else ... [
      Text('Good Night'),
      Text('Sleep Well'),
    ],
  ],
)

Historical Approach: Opacity Widget

Before the introduction of the Visibility Widget, developers commonly used the Opacity Widget for similar functionality. While Visibility is now the preferred choice, understanding Opacity remains valuable.

Opacity(
  opacity: 0.0,
  child: Padding(
    padding: const EdgeInsets.only(left: 16.0),
    child: Icon(Icons.edit, color: Colors.blue),
  ),
)

This method hides the Widget by setting opacity to 0.0, but the Widget still occupies layout space. To completely remove the Widget, it must be replaced with an empty Container.

Visibility Control in State Management

In practical applications, Widget visibility is often closely tied to application state management. A common scenario mentioned in reference articles involves showing or hiding dialogs based on loading state in the BLoC pattern.

A typical implementation pattern:

// Controlling dialog display in state listener
bloc.state.listen((state) {
  if (state.isLoading) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        content: Row(
          children: [
            CircularProgressIndicator(),
            SizedBox(width: 16),
            Text('Loading...'),
          ],
        ),
      ),
    );
  } else {
    // Correct way to hide dialog
    Navigator.of(context, rootNavigator: true).pop();
  }
});

It is important to note that when using Navigator.pop() to hide dialogs, specify rootNavigator: true to ensure only the dialog is closed without affecting the page navigation stack.

Layout Considerations and Best Practices

When choosing visibility control methods, consider the following factors:

Performance Considerations: The Visibility Widget retains Widget state when maintainState is true, which may impact performance with frequent visibility toggles. For infrequent changes, conditional rendering may be more efficient.

Layout Stability: Using INVISIBLE mode (preserving space) maintains layout stability, preventing jumps caused by Widget show/hide actions.

Animation Continuity: The maintainAnimation parameter of Visibility is particularly useful for preserving animation states.

Conclusion

Flutter offers multiple flexible ways to programmatically control Widget visibility. The Visibility Widget is the most comprehensive and recommended solution, capable of precisely emulating various visibility states from Android. Conditional rendering provides a lighter alternative, especially suitable for simple show/hide logic. In actual development, choose the most appropriate method based on specific requirements, while considering performance, layout stability, and state management factors.