🙈

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

2 min read 2

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 にしてやればできそう?
ちょっとまだ試してないですが。

Discussion

IgnorePointerを使うと簡単にAnimatedOpacityの領域も消せましたので他の方の参考にもなれば:)

https://stackoverflow.com/a/54607744
IgnorePointer(
  ignoring: !_visible,
  child: AnimatedOpacity(
    opacity: _visible ? 0.0 : 1.0,
    duration: Duration(milliseconds: 200),
    child: MyWidget(),
  ),
)

@wake さん 情報追記ありがとうございます!

ログインするとコメントできます