FlutterFlowにおけるPadding&Alignment、Expansionの使い方: 3つのパターンを解説

FlutterFlowでは、Padding＆AlignmentのExpansionにある3つの設定をうまく使うことで、ウィジェットの配置やサイズ調整を柔軟に行うことができます。これらは、UIデザインにおいて重要な役割を果たします。

是非マスターして自在にUIデザインをコントロールしましょう。

３つのパターンの違い

以下のようにRowの中にコンテナとTextを配置し、コンテナにExpansionを設定して違いを見てみます。

設定の違いを見るのは以下のExpansionです。

Default

• 一番左のExpansionで、特に指定がない場合に使用されます。
• ウィジェットのサイズは、子要素のサイズに基づいて決定されます。
• 子要素が大きくなるにつれて、横幅も大きくなります。

横幅が広い画面では文字が入っているところまでコンテナとテキストが広がっています。

画面サイズが狭まると、文字が見切れています。画面に収まらない箇所が黄色と黒の縞々で表示されています。

Flexible

• 「Flexible」設定は、ウィジェットが利用可能な空間内で柔軟にサイズを変更できることを意味します。
• このオプションは、ウィジェットが他のウィジェットとのバランスを取りながら空間を適応的に使用する際に有効です。

画面が広いと文字の範囲までコンテナとテキストが広がります。この場合はDefaultと変わりなく見えます。

画面が狭くなると画面の横幅の箇所で文字を折り返してくれます。柔軟です。

Expanded

• 「Expanded」設定は、ウィジェットが利用可能な追加スペースを最大限に使用することを意味します。
• この設定を使用するウィジェットは、他の要素との間で可能な限り多くのスペースを占めるように拡大されます。
• 特に大きな画面や空間を多く取る要素に適しています。

Expandedは横幅いっぱい広がります。文字が途中で終わっていたとしてもコンテナは横幅いっぱいまで広がっています。

画面の横幅が狭くなると、文字は折り返しています。そしてもちろんコンテナは横幅いっぱいです。

まとめ

このように、Expansionはウィジェットのサイズ調整において重要な役割を果たします。適切なパターンを選択することで、ユーザーインターフェースを柔軟に設計することができます。

マスターしていいUIを作ってください。