【Flutter】widgetの表示/非表示の切り替え方法

ログインエラー時にエラーメッセージを表示する際など、パーツの表示/非表示を切り替えたい時の実装方法をいくつか紹介します。

Visibilityを使用するパターン

Visibility(
  visible: isVisible,
  child: Text('エラーです。'),
)

上記のようにVisibility を使用し、visible:にtrueを設定すると表示、visible:にfalseを設定すると非表示になります。

非表示の時は表示エリアはなくなり他のパーツが詰めて表示されます。

非表示の時も表示エリアを確保し続けたい場合は以下のようにmaintainSize: trueを設定します。

Visibility(
  visible: isVisible,
  maintainSize: true,
  child: Text('エラーです。'),
)

Visibilityとほとんど同じようなものなのですが、Offstageというものもあります。使い方も以下のようにVisibilityとそっくりです。

Offstage(
  offstage: isVisible,
  child: Text('エラーです。'),
)

Visibilityとの使い分けをどうすればいいか悩む…。

上記のVisibility以外の方法としてはAnimatedOpacityを使用しパーツを透明にすると言う方法もあります。あくまでも透明にするだけなので、表示エリアを確保し続けられます。

AnimatedOpacity(
  opacity: isVisible ? 0.0 : 1.0,
  duration: Duration(milliseconds: 100),
  child:  Text('エラーです。'),
)