How to show/hide widgets programmatically in Flutter

IMHO, there's no need in visibility property or special widget for that in Flutter cause if you don't need a widget displayed - just don't add it to widget tree OR replace it with an empty widget:

@override
Widget build(BuildContext context) {
return someFlag ? Text('Here I am') : SizedBox();
}

I think the reason for Visibility widget existance is because so many people asked:) People are used to having visibility of elements controled by some property

### Conditionally add/remove a widget

To include/exclude a widget:

```flutter
if (this.isLuckyTime) TextButton(
child: Text('I am feeling lucky')
)
```

In case you want to make the widget invisible but still keep its size then wrap it into [`<Visibility>`][1] and set `maintainSize: true`. If it's stateful and you need to keep it's state then also add `maintainState: true`.

### Animated Widget fade in and fade out

To make the widget fade in and out smoothly you can use [AnimatedOpacity][2].

```
AnimatedOpacity(
opacity: this.isLuckyTime ? 1.0 : 0.0,
duration: Duration(milliseconds: 500),
child: Text('I am feeling lucky')
)
```

<sup>Specifically for devs coming from native android: it's probably worth mentioning that you never show/hide widgets, you redraw the UI with or without the widgets you need:</sup>

<sup>👉 [Introduction to declarative UI][3]</sup><br>
<sup>👉 [State Management][4]</sup><br>
<sup>👉 [Simple app state management][5]</sup>


[1]:

[To see links please register here]

[2]:

[To see links please register here]

[3]:

[To see links please register here]

[4]:

[To see links please register here]

[5]:

[To see links please register here]

*There are quite a few different ways to achieve this in Flutter. Before I explain each one of them, I'll first provide quick solutions equivalent to the Android-native "invisible" and "gone":*

**View.INVISIBLE:**

Opacity(
opacity: 0.0,
child: ...
)

**View.GONE:**

Offstage(
child: ...
)


*Now let's compare these and other methods:*

**Opacity**

This widget sets the opacity (alpha) to anything you want. Setting it to `0.0` is just slightly less visible than setting it to `0.1`, so hopefully that's easy to understand. The widget will still maintain its size and occupy the same space, and maintain every state, including animations. Since it leaves a gap behind, users can still touch it or click it. (BTW, if you don't want people to touch an invisible button, you can wrap it with an `IgnorePointer` widget.)

**Offstage**

This widget hides the child widget. You can imagine it as putting the widget "outside of the screen" so users won't see it. The widget still goes through everything in the flutter pipeline, until it arrives at the final "painting" stage, where it doesn't paint anything at all. This means it will maintain all the state and animations, but just won't render anything on the screen. In addition, it also won't occupy any space during layout, leaving no gap behind, and naturally users cannot click it.

**Visibility**

This widget combines the above (and more) for your convenience. It has parameters like `maintainState`, `maintainAnimation`, `maintainSize`, `maintainInteractivity` etc. Depending on how you set those properties, it decides from the following:

1. if you want to maintain state, it will either wrap the child with an `Opacity` or with an `Offstage`, depends on whether you also want to maintain size. Further, unless you want to `maintainInteractivity`, it will also wrap an `IgnorePointer` for you, because clicking on a transparent button is kinda weird.

2. if you don't want to `maintainState` at all, it directly replaces the `child` with a `SizedBox` so it's completely gone. You can change the blank `SizedBox` to anything you want, with the `replacement` property.


**Removing Widget**

If you don't need to maintain states and etc, it's usually recommended to completely remove the widget from the tree. For example, you can use `if (condition)` to decide whether to include a widget in a list, or use `condition ? child : SizedBox()` to replace it with a `SizedBox` directly. This avoid unnecessary calculations and is the best for performance.

**Update**

Flutter now has a [Visibility][1] widget. To implement your own solution start with the below code.

----------

Make a widget yourself.

**show/hide**


class ShowWhen extends StatelessWidget {
final Widget child;
final bool condition;
ShowWhen({this.child, this.condition});

@override
Widget build(BuildContext context) {
return Opacity(opacity: this.condition ? 1.0 : 0.0, child: this.child);
}
}

**show/remove**


class RenderWhen extends StatelessWidget {
final Widget child;
final bool condition;
RenderWhen({this.child, this.show});

@override
Widget build(BuildContext context) {
return this.condition ? this.child : Container();
}
}

*By the way, does any one have a better name for the widgets above?*





**More Reads**

1. [Article][2] on how to make a visibility widget.


[1]:

[To see links please register here]

[2]:

[To see links please register here]

Flutter now contains a [Visibility Widget][1] that you should use to show/hide widgets. The widget can also be used to switch between 2 widgets by changing the replacement.

This widget can achieve any of the states visible, invisible, gone and a lot more.

Visibility(
visible: true //Default is true,
child: Text('Ndini uya uya'),
//maintainSize: bool. When true this is equivalent to invisible;
//replacement: Widget. Defaults to Sizedbox.shrink, 0x0
),

[1]:

[To see links please register here]

### Definition:

**Invisible**: The widget takes up physical space on the screen but is not visible to user. This can be achieved using `Visibility` widget.

**Gone**: The widget doesn't take up any physical space and is completely gone. This can be achieved using `Visibility`, `if` or `if-else` condition.



### Invisible example:

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

### Gone example:

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


----------

### Using `if`:

- **For one child:**

```dart
Column(
children: <Widget>[
Text('Good Morning'), // Always visible
if (wishOnePerson) Text(' Mr ABC'), // Only visible if condition is true
],
)
```

- **For multiple children:**

```dart
Column(
children: [
Text('Good Morning'), // Always visible
if (wishAll) ... [ // These children are only visible if condition is true
Text('Mr ABC'),
Text('Mr DEF'),
Text('Mr XYZ'),
],
],
)
```

### Using `if-else`:

- **For one child:**

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

- **For multiple children:**

```dart
Column(
children: [
// Only one of the children will be shown based on `beforeSunset` condition
if (beforeSunset) ... [
Text('Good morning'),
Text('Good afternoon'),
] else ... [
Text('Good evening'),
Text('Good night'),
],
],
)
```

class VisibilityExample extends StatefulWidget {
const VisibilityExample({Key? key}) : super(key: key);

@override
_VisibilityExampleState createState() => _VisibilityExampleState();
}

class _VisibilityExampleState extends State<VisibilityExample> {
bool visible = false;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Lines'),
),
body: Container(
color: Colors.black87,
child: Stack(alignment: Alignment.bottomCenter, children: [
ListView(
shrinkWrap: true,
children: [
Container(
height: 200,
),
InkWell(
onTap: () {},
onHover: (value) {
print(value);
setState(() {
visible = !visible;
});
},
child: Visibility(
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: visible,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.arrow_left_outlined,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.add_circle_outlined,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.remove_circle,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(
Icons.arrow_right_outlined,
),
onPressed: () {},
),
const SizedBox(
width: 5,
),
IconButton(
color: Colors.white54,
icon: const Icon(Icons.replay_circle_filled_outlined),
onPressed: () {},
),
],
),
),
),
],
),
]),
),
);
}
}



[![enter image description here][1]][1]


[1]: