Flutter で 表示非表示切り替えは Visibility があるぞ。AnimatedOpacity もある。

公開:2020/11/04
更新:2020/11/04
2 min読了の目安(約2300字TECH技術記事

TL;DR

昔はなかった Visibility

昔は Visibility Class が提供されていなかったようで
Googleで検索すると自前で用意するといった記事も出てくる。
2019年6月頃には使用できるようになっていた様子。

Visibility の使い方

単純に表示/非表示を切り替えるならすごく使いやすい。

非表示時に領域ごとなくす場合

// _visible = false; で非表示
Visibility(
  visible: _visible,
  child: MyWidget(),
)

非表示時も領域は確保し続ける場合

// _visible = false; で非表示
Visibility(
  visible: _visible,
  maintainSize: true,
  child: MyWidget(),
)

そのほか

  • maintainState
  • maintainAnimation
  • maintainInteractivity
  • replacement

といったプロパティも用意されている。

AnimatedOpacity の使い方

表示/非表示時にフェードイン/アウトをさせるならこっち。
opacity で透明度、 duration でフェード時間を指定する。
あくまで透明度なので透明にしたあとの領域は確保される。

// _visible = false; で非表示
AnimatedOpacity(
  opacity: _visible ? 0.0 : 1.0,
  duration: Duration(milliseconds: 200),
  child: MyWidget(),
)

あくまで透明度なので透明にしたあと領域をなくすとなると
そこにもズレ混むようなアニメーションがないと不自然そう。
AnimatedSwitcher を使って AnimatedContainer で包んでおいて
widthheight_visible に応じて 0 にしてやればできそう?
ちょっとまだ試してないですが。