🍣

Visibility の初歩的な活用方法を考えてみた

2022/10/11に公開

前提として、私が非表示する際は、SizedBoxに置き換えする方法を利用していた。検索するとContainerがよく出てくるが、Containerはconst化できないため、負荷などの理由によって利用はおすすめしないという話を聞いてから、全く利用しなくなった。

Visibilityでも同様のことはもちろん、更にもっと複雑なことをできるとのこと。

ところで、
Visibilityのreplacementの初期値はSizedBox.shrinkである。
では、SizedBoxではなく、SizedBox.shrinkが初期値に設定されているか。

そもそもVisibilityは非表示であるが、一言に非表示と言っても、複数のパターンが考えられる。

① 完全にWidgetを消し去る。
② Widgetを消し去るが、領域だけは残す。
③ Widgetを消し去るが、少し隙間はほしい。

SizedBox.shrinkは①のために設定されている。

SizedBox.shrinkは width,height が 0.0 に設定されているため、子Widgetにどれだけ大きなものを設定しても、親Widgetが許す限り大きさを持たないWidgetになる。
Widgetを消し去るという利用方法が目的なら、もちろん最善の選択である。

②の方法が良い場合は、

maintaineSizeを利用することで、子Widgetの領域を保つことができる。

 Visibility(
	maintainSize: true,
	visible: false,
	child: Text('HELLO'),
),


③の方法が良い場合は、

replacementを変更する。例えば、表示時は、 heightを100、非表示時はheight 40を保証したい場合は、

 Visibility(
	replacement: SizedBox(height: 40),
	visible: false,
	child: SizedBox(
		height: 100,
		child:Text('HELLO'),
	),
),

とする。これで、非表示しても40の領域を保てるため、Widget同士がきつキツに詰め込まれるといった症状から開放される。

以上、私が最近知った事実の共有である。

Discussion