Flutterを使ってみよう その７（レイアウト方法①）
公開日: 2024/10/22
前回までには詳しく触れてませんが、Flutterにおけるレイアウト方法の知識を深めていきましょう。
Flutterでは、レイアウトを制御するウィジェットを利用して、並びに、組み合わせて、画面レイアウトを形成していきます。
まずは、基本的なサイズ調整や表示位置のレイアウトを制御するウィジェットを理解することを目的とします。
環境
・MacOS Ventura 13.6.3
・Xcode 15.1
・VSCode 1.85.1
・Flutter 3.16.5
・Dart 3.2.3
1. ConstrainedBox ウィジェット
ConstrainedBox ウィジェットは、子ウィジェットへの幅・高さの制約設定するときに使うレイアウトウィジェットです。
SafeArea(
child: ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 180,
maxHeight: 100,
minWidth: 50,
minHeight: 20,
),
child: const Text('ConstrainedBox'),
),
),コード例だと、ConstrainedBox ウィジェットを使用して、子ウィジェットのテキスト「ConstrainedBox」に対し、幅50〜180×高さ20〜100の領域で表示しますように指定しています。
親ウィジェット（ SafeArea ウィジェット）に対しては、特に制約指定してませんので、該当ウィジェットは、左上位置に表示されます。
2. SizedBox ウィジェット
SizedBox ウィジェットは、子ウィジェットへの幅・高さ固定の制約設定するときに使うレイアウトウィジェットです。
SafeArea(
child: SizedBox(
width: 180,
height: 100,
child: Text('SizedBox'),
),
),コード例だと、SizedBox ウィジェットを使用して、子ウィジェットのテキスト「SizedBox」に対し、幅180×高さ100の領域で表示します。
親ウィジェット（ SafeArea ウィジェット）に対しては、特に制約指定してませんので、該当ウィジェットは、左上位置に表示されます。
また、 SizedBox ウィジェットは、いくつかのパターンのコンストラクタが用意されてます。
・SizedBox.expand ：親ウィジェットの許す限りの大きさの SizedBox ウィジェットを生成
・SizedBox.shrink ：幅・高さが0の SizedBox ウィジェットを生成
・SizedBox.fromSize ： Size データの幅・高さの SizedBox ウィジェットを生成
・SizedBox.square ：指定した正方形サイズの SizedBox ウィジェットを生成
3. UnconstrainedBox ウィジェット
UnconstrainedBox ウィジェットは、 ConstrainedBox ウィジェットとは逆に、子ウィジェットへの幅・高さの制約を特に設定しないときに使うレイアウトウィジェットです。
SafeArea(
child: Column(
children: [
SizedBox(
width: 180,
height: 100,
child: Text('SizedBox'),
),
UnconstrainedBox(
child: Text('UnconstrainedBox'),
),
],
),
)コード例だと、 Column ウィジェットを利用しているため、ウィジェットが縦並びになります。
まず、幅180×高さ100の領域でテキスト「SizedBox」が表示されます。
次に、UnconstrainedBox ウィジェットを使用して、子ウィジェットのテキスト「UnconstrainedBox」が制約なしで表示されます。
親ウィジェット（ SafeArea ウィジェット）に対しては、特に制約指定してませんので、該当ウィジェットは、左上位置から表示されます。
4. LimitedBox ウィジェット
LimitedBox ウィジェットは、子ウィジェットへの幅・高さ最大値のみの制約設定するときに使うレイアウトウィジェットです。
SafeArea(
child: LimitedBox(
maxWidth: 180,
maxHeight: 100,
child: Text('LimitedBox'),
),
),コード例だと、LimitedBox ウィジェットを使用して、子ウィジェットのテキスト「LimitedBox」に対し、幅最大180、高さ最大100の領域で表示します。
親ウィジェット（ SafeArea ウィジェット）に対しては、特に制約指定してませんので、該当ウィジェットは、左上位置に表示されます。
5. Align ウィジェット
Align ウィジェットは、子ウィジェットの表示位置を制約設定するときに使うレイアウトウィジェットです。
SafeArea(
child: SizedBox.expand(
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Align'),
),
),
),コード例だと、Align ウィジェットを使用して、子ウィジェットのテキスト「Align」を親ウィジェットの右下に配置して表示します。
親ウィジェットは、 SizedBox.expand で生成したウィジェットです。
alignment は、いくつかのパターンが下記のように用意されていますので、それらを使用するのが一般的です。
・Alignment.topLeft ：子ウィジェットを左上詰めに配置
・Alignment.topCenter ：子ウィジェットを中央上詰めに配置
・Alignment.topRight ：子ウィジェットを右上詰めに配置
・Alignment.centerLeft ：子ウィジェットを左中詰めに配置
・Alignment.center ：子ウィジェットを中央に配置
・Alignment.centerRight ：子ウィジェットを右中詰めに配置
・Alignment.bottomLeft ：子ウィジェットを左下詰めに配置
・Alignment.bottomCenter ：子ウィジェットを中央下詰めに配置
・Alignment.bottomRight ：子ウィジェットを右下詰めに配置
6. Center ウィジェット
Center ウィジェットは、 Align ウィジェットの派生処理で子ウィジェットを中央位置へ配置する制約設定するときに使うレイアウトウィジェットです。
SafeArea(
child: SizedBox.expand(
child: Center(
child: Text('Center'),
),
),
),コード例だと、Center ウィジェットを使用して、子ウィジェットのテキスト「Center」を親ウィジェットの中央に配置して表示します。
親ウィジェットは、 SizedBox.expand で生成したウィジェットです。
7. Container ウィジェット
Container ウィジェットは、一般的なペイント、配置、サイズ変更を組み合わせたときに使うレイアウトウィジェットです。
SafeArea(
child: Container(
alignment: Alignment.center,
margin: const EdgeInsets.all(10),
color: Colors.blue,
width: 80,
height: 50,
child: const Text('Container'),
),
),コード例だと、Container ウィジェットを使用して、子ウィジェットのテキスト「Container」に対し、幅80×高さ50の領域で、背景色は青で、中央位置で表示し、隣接ウィジェットからは、上下左右幅10で配置します。
width 、 height が省略された場合、親のサイズ感に調整されます。
8. まとめ
今回は、基本的なサイズ調整や表示位置のレイアウトの知識を深めるのを目的に記事を書きました。
次回は、他のレイアウトやそれらを使った応用した例などでレイアウトの知識を深める予定です。