FlutterFlowにおけるFlexの使い方: 柔軟なレイアウト設計の基礎

FlutterFlowのPadding & AlignmentのFlexについて解説します。

Flexは、FlutterFlowのPadding & Alignmentの設定の一つで、ウィジェットのサイズを柔軟に調整するために使用されます。Flexを使用することで、ウィジェットは利用可能なスペースに応じて自動的にサイズを変更し、他のウィジェットとスペースを共有します。

前提

以下のようにRowの中にコンテナを2つ配置したシンプルな構成を例に説明します。
コンテナのExpansionは「Expanded」にしておきます。今はFlexに値を入れていません。

以下はコンテナの設定

Flexの設定による違い

左右それぞれに数値を設定

左のコンテナにFlex：２、右のコンテナにFlex：3

はい、このように2:3の幅でそれぞれのコンテナが表示されます。
Flexはそれぞれの幅を調整するときにこのように活躍します。

左のコンテナにのみ値を設定

Flex：１

左右の幅は１：１の割合で表示されています。

Flex：2

左右の幅は２：１の割合で表示されています。

お気づきの通り、右のコンテナはFlex：１として動作します。

Expansionを変えると？

左右両方Expansionは”Expanded”

最初は左右のコンテナのExpansionはExpanded、Flexは左が３，右が１にしておきます。
Padding ＆Alignmentは左側のコンテナの設定を表示しています。

左のコンテナのExpansionは”Flexible”

左のコンテナのExpansionを真ん中のFlexibleに変更します。
以下のように左のコンテナは設定しているWidth”100”の値になっています。右側のコンテナは左のコンテナサイズが3、右側が1の時と同じサイズのままとなっています。

左のコンテナのExpansionは”Default”

左のコンテナのExpansionを一番左の”Default”に変更します。
以下のように左のコンテナは設定しているWidth”100″の値になっています。右側のコンテナはExpansion：Expandedが効いて画面いっぱい広がります。
Padding & AlignmentのFlexの値はNullになります。

まとめ

Flex機能を適切に活用することで、FlutterFlowを使用したアプリケーションのレイアウトは格段に柔軟かつ効率的になります。

この記事を通じて、ウィジェット間のスペース配分を動的に制御する方法を理解し、より応用的なUIデザインを実現するための基盤が築かれました。ぜひ実際のプロジェクトにおいてもこれらの技術を活かし、ユーザーにとって見やすく操作しやすいインターフェース作りを目指してください。