Zenn
🙈

FlutterのVisibilityで領域確保しながら非表示

に公開
Flutter
tech

Visibilityの記事はあるが、非表示時に領域を確保するパラメータ設定について書いてあるものがあまりない。

結論

Visibility(
  visible: 表示する条件,
  maintainSize: true,
  maintainAnimation: true,
  maintainState: true,
  child: ウィジェット,
),

環境

Flutter 3.10.5

アサート文

assert(
    maintainState == true || maintainAnimation == false,
    'Cannot maintain animations if the state is not also maintained.',
),
assert(
    maintainAnimation == true || maintainSize == false,
    'Cannot maintain size if animations are not maintained.',
),

アサート文の1文目

maintainState == true か maintainAnimation == false であればよい。
つまり maintainAnimation == true にしたいなら maintainState == true にする必要がある。

アサート文の2文目

maintainAnimation == true か maintainSize == false であればよい。
つまり maintainSize == true にしたいなら maintainAnimation == true にする必要がある。

つまり

  1. maintainSize == true にする
  2. アサートの2文目により maintainAnimation == true にする必要がある
  3. アサートの1文目により maintainState == true にする必要がある

結論

maintainSize: true,
maintainAnimation: true,
maintainState: true,

まあ、maintainAnimation と maintainState がなんなのかは調べてないんですが。

Discussion