Centerウィジェット/Alignウィジェット
そこで、Containerウィジェットの用途をより限定したCenterウィジェットやAlignウィジェットなどがあります。
Centerウィジェットは、簡単にウィジェットを中央に配置するためのレイアウトで、リスト5のように利用します。
return Center(
child: Container(
color: Colors.deepOrange,
width: 200,
height: 200,
margin: EdgeInsets.all(20),
),
);
このコードを実行した結果が、図5です。
Alignウィジェットは、alignmentプロパティで指定して配置するためのウィジェットで、リスト6のように利用します。
return Align(
alignment: Alignment.topRight,
child: Container(
width: 200,
height: 200,
color: Colors.blue,
),
);
このコードを実行した結果が、図6です。
このようにContainerウィジェットでも実現可能ですが、目的がはっきりとするためコードの目的にそってわかりやすくなるという特徴があります。
AspectRatioウィジェット（サイズを比率で指定する）
先ほど、紹介したCenterウィジェットやAlignウィジェットなどはContainerウィジェットの機能を限定したような使い方になります。
しかし、Containerウィジェットのプロパティ指定だけでは難しいこともあります。そのようなウィジェットの1つに、AspectRatioウィジェットがあります。
このウィジェットは、親ウィジェットのサイズに応じてサイズ比率を決定するためのウィジェットです。
例えば、リスト7は親ウィジェットの大きさに合わせて、16（横）：9（縦）の比率でサイズを指定したい場合のコード例です。
return AspectRatio(
// （1） 16/9で指定
aspectRatio: 16/9,
child: Container(
margin: EdgeInsets.all(20),
color: Colors.blue,
),
);
（1）のように、aspectRatioプロパティに16:9の場合には16/9で指定します。計算結果である約1.7のような値を入れるとどのような意図かわかりにくくなるので、16/9のように比率で入力することが推奨されています。このコードを実行した結果が図7のようになります。
Column／Row（子ウィジェットを縦／横並びにそろえて配置する）
続いて、複数の子ウィジェットを配置するレイアウトを紹介します。これらの主なレイアウトには主に表2のようなものがあります。
その中で、まずは最も基本的ととなるレイアウトであるColumnとRowを紹介します。
| ウィジェット名 | 説明 |
|---|---|
| Column | ウィジェットを縦に並べるレイアウト |
| Row | ウィジェットを横に並べるレイアウト |
| GridView | ウィジェットを縦横に並べるレイアウト |
| IndexedStack | 指定するウィジェットに表示を簡単に切り替えるためのレイアウト |
| ListView | スクロールすることを想定し、ウィジェットを縦にリスト形式で並べるレイアウト |
| Stack | ウィジェットを重ねて表示するためのレイアウト |
| Table | ウィジェットを縦横に並べ、かつスクロール表示が必要ないためのレイアウト |
| Wrap | ウィジェットを縦または横に並べ、はみ出したものは自動的に次の行または列に表示するレイアウト |
この2つは指定した子ウィジェットを縦もしくは横に並べます。おおよそ、同じような使い方ですが、それぞれのウィジェットをどのように並べるかの指定で注意が必要です。
並べ方には、子ウィジェットをどのように配置するかを示すmainAxisAlignmentプロパティと、各ウィジェット間での位置揃えを設定するcrossAxisAlignmentの2つのプロパティがあります。
ColumnとRowでは、この2つのプロパティの意味合いが変化します。以下の図を確認しておきましょう。
Columnの場合には、mainAxisAlignmentの違いによって図9のように配置が変わります。start／end／centerの違いはわかりやすいと思います。
spaceBetweenは各要素間の間隔を同じにします。そして、spaceEvenlyは、両側のウィジェットと親要素の間隔も含めて同じにします。spaceAroundは、両側のみの間隔のみ1/2にします。
一方、crossAxisAlignmentの指定の違いを示したものが図10です
start／end／centerでは子要素をどこで位置揃えをするかを決めます。また、stretchでは、最も大きい要素に合わせてサイズを調整します。実際のコードはリスト8のように記述します。
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
childContainer(100, 100),
childContainer(200, 100),
childContainer(100, 200),
childContainer(200, 200),
],
);
このコードを実行した結果が、図11のようになります。
Rowでもほぼコードは変わらず、リスト9のように使用します。
return Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
childContainer(50, 50),
childContainer(100, 50),
childContainer(50, 100),
childContainer(100, 100),
],
);
このコードを実行した結果が、図12のようになります。
このようにmainAxisAlignmentとcrossAxisAlignmentのプロパティは同じですが、ColumnとRowでは向きが変わります。
