🙈

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

2020/11/04に公開

4件

Flutter

tech

TL;DR

単純に表示非表示を制御するなら Visibility がある
- Visibility class | Flutter
  - https://api.flutter.dev/flutter/widgets/Visibility-class.html
- 非表示時にオブジェクトがあった分の領域を確保する / しないも制御できる
表示非表示切り替えにフェードイン / アウトしたいなら AnimatedOpacity
- AnimatedOpacity class | Flutter
  - https://api.flutter.dev/flutter/widgets/AnimatedOpacity-class.html
- もっと複雑な制御をしたいなら FadeTransition
  - https://api.flutter.dev/flutter/widgets/FadeTransition-class.html
- ただしあくまで透明度なので非表示の領域を制御したいなら別途制御が必要
  - とはいえフェードアウトしてから非表示にした領域を消すとなるとそこにもズレ混むようなアニメーションが必要になてきますね

昔はなかった Visibility

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

Managing visibility in Flutter | Medium
- https://medium.com/flutter/managing-visibility-in-flutter-f558588adefe
FlutterでVisibility widgetを作る | Qiita
- 上記記事の日本語解説
- https://qiita.com/nichiyoshi/items/90ddb18fe8fd5123dd5e
【Flutter】Widgetの表示・非表示を動的に切り替える | Qiita
- 空 Container に差し替えてやる手法
- https://qiita.com/rkowase/items/c4883a6ebc91e3f4a345
Show/hide widgets in Flutter programmatically | stackoverflow
- ここで Visibility が出ましたね、みたいな話が出てる
- https://stackoverflow.com/questions/44489804/show-hide-widgets-in-flutter-programmatically

Visibility の使い方

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

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

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

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

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

そのほか

maintainState
maintainAnimation
maintainInteractivity
replacement

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

Widget Hide and Seek: A guide to managing Flutter widget’s visibility | Medium
- https://medium.com/@danle.sdev/widget-hide-and-seek-a-guide-to-managing-flutter-widgets-visibility-d7977cbaf444
Visibility class | Flutter
- https://api.flutter.dev/flutter/widgets/Visibility-class.html

AnimatedOpacity の使い方

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

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

あくまで透明度なので透明にしたあと領域をなくすとなると
そこにもズレ混むようなアニメーションがないと不自然そう。
AnimatedSwitcher を使って AnimatedContainer で包んでおいて
width や height を _visible に応じて 0 にしてやればできそう？
ちょっとまだ試してないですが。
→ 2021/11/24 追記
　コメントにて、これでできるとのご連絡いただきました！

Discussion

wake 2021/08/12に更新

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

IgnorePointer(
  ignoring: !_visible,
  child: AnimatedOpacity(
    opacity: _visible ? 0.0 : 1.0,
    duration: Duration(milliseconds: 200),
    child: MyWidget(),
  ),
)

北山淳也 2021/08/13

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

蓮美 2021/11/19

AnimatedSwitcher を使って AnimatedContainer で包んでおいて
width や height を _visible に応じて 0 にしてやればできそう？

もう結論出てると思いますが、一応確認したところ出来ました。
ご報告までに。

北山淳也 2021/11/24

@蓮美さん
ありがとうございます！追記しておきました🙇‍♂️