Flutter – Show/hide widgets in Flutter programmatically

dartflutterflutter-layout

In Android, every single View subclass has a setVisibility() method that allows you modify the visibility of a View object

There are 3 options of setting the visibility:

  • Visible: Renders the View visible inside the layout
  • Invisible: Hides the View, but leaves a gap that is equivalent to what the View would occupy if it were visible
  • Gone: Hides the View, and removes it entirely from the layout. It's as if its height and width were 0dp

Is there something equivalent to the above for Widgets in Flutter?

For a quick reference:
https://developer.android.com/reference/android/view/View.html#attr_android:visibility

Best Answer

Invisible: The widget takes physical space on the screen but not visible to user.

Gone: The widget doesn't take any physical space and is completely gone.

Invisible example

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

Gone example

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

You can also use if or if-else.

  • Using if

    Column(
  children: <Widget>[
    Text('Good Morning'), // Always visible
    if (hasName) Text(' Mr ABC'), // Visible only if 'hasName' is true
  ],
)

  • Using if-else

    Column(
  children: <Widget>[
    // Only one of them is visible based on 'isMorning' condition.
    if (isMorning) Text('Good Morning')
    else Text ('Good Evening'),
  ],
)
Related Topic