縦にWidgetを並べる(基礎編) - MOGIのアプリ開発

Flutter アプリを作成する際、複数のウィジェットを縦に並べたい場面がよくあります。そんな時に使うのがColumnウィジェットです。
Column ウィジェットは、子ウィジェットを縦方向（垂直方向）に並べるレイアウトウィジェットです。

基本的な使い方

1. 基本的な Column

最もシンプルな Column の使い方を見てみましょう：

dart
1Column(
2  children: [
3    Text('1つ目のテキスト'),
4    Text('2つ目のテキスト'),
5    Text('3つ目のテキスト'),
6  ],
7)

このコードでは、3 つの Text ウィジェットが縦に並んで表示されます。

2. 異なるウィジェットを並べる

Column の中には、同じ種類のウィジェットだけでなく、異なる種類のウィジェットも配置できます：

dart
1Column(
2  children: [
3    Text('タイトル', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
4    Container(
5      width: 100,
6      height: 50,
7      color: Colors.blue,
8      child: Center(child: Text('青い箱', style: TextStyle(color: Colors.white))),
9    ),
10    ElevatedButton(
11      onPressed: () {},
12      child: Text('ボタン'),
13    ),
14  ],
15)

この例では、Text、Container、ElevatedButton という異なるウィジェットが縦に並んでいます。

スペーシングの追加

ウィジェット同士の間にスペースを追加したい場合は、SizedBoxウィジェットを使用します：

dart
1Column(
2  children: [
3    Text('上'),
4    SizedBox(height: 20), // 20ピクセルのスペース
5    Text('中'),
6    SizedBox(height: 20), // 20ピクセルのスペース
7    Text('下'),
8  ],
9)

SizedBox(height: 20)は、高さ 20 ピクセルの透明なスペースを作成します。

配置の調整

Column ウィジェットには、子ウィジェットの配置を調整するためのプロパティがあります：

mainAxisAlignment（縦方向の配置）

MainAxisAlignment.start: 上端に配置（デフォルト）
MainAxisAlignment.center: 中央に配置
MainAxisAlignment.end: 下端に配置
MainAxisAlignment.spaceEvenly: 均等に配置
MainAxisAlignment.spaceBetween: 両端に配置し、間を均等に分割
MainAxisAlignment.spaceAround: 各要素の周りに均等なスペース

crossAxisAlignment（横方向の配置）

CrossAxisAlignment.start: 左端に配置
CrossAxisAlignment.center: 中央に配置（デフォルト）
CrossAxisAlignment.end: 右端に配置
CrossAxisAlignment.stretch: 幅いっぱいに拡張

例：

dart
1Column(
2  mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 縦方向に均等配置
3  crossAxisAlignment: CrossAxisAlignment.center, // 横方向に中央配置
4  children: [
5    Text('上'),
6    Text('中'),
7    Text('下'),
8  ],
9)

実際のサンプルアプリケーション

今回作成したサンプルアプリケーションでは、Column ウィジェットの様々な使い方を実際に確認できます。

Column Widget Demo アプリの実行画面。4 つのデモセクションが縦に並んで表示されています。

アプリケーションの特徴

基本的な Column: 3 つの Text ウィジェットを縦に並べた例
- 上記のスクリーンショットの最初のセクションで確認できます
- シンプルなテキストが縦に並んでいる様子がわかります
異なるウィジェットを並べる: Text、Container、ElevatedButton を組み合わせた例
- 2 番目のセクションで、タイトル、青い箱、ボタンが縦に並んでいます
- 異なる種類のウィジェットが Column 内で統一されて配置されています
スペーシング: SizedBox を使った要素間のスペース追加
- 3 番目のセクションで、「上」「中」「下」のテキスト間に適切なスペースが設けられています
- 視覚的に見やすいレイアウトになっています
配置: mainAxisAlignment と crossAxisAlignment を使った配置調整
- 4 番目のセクションで、テキストが均等に配置されている様子が確認できます
- 縦方向の配置が調整されていることがわかります

コードの構造

サンプルアプリケーションは以下の構造になっています：

MyApp: アプリケーションのエントリーポイント
ColumnDemoPage: メインのデモページ
DemoSection: 各デモセクションを表示するウィジェット

よくある使用例

1. フォームの作成

dart
1Column(
2  children: [
3    TextField(decoration: InputDecoration(labelText: '名前')),
4    SizedBox(height: 16),
5    TextField(decoration: InputDecoration(labelText: 'メールアドレス')),
6    SizedBox(height: 16),
7    ElevatedButton(onPressed: () {}, child: Text('送信')),
8  ],
9)

2. カードの作成

dart
1Column(
2  crossAxisAlignment: CrossAxisAlignment.start,
3  children: [
4    Text('タイトル', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
5    SizedBox(height: 8),
6    Text('説明文がここに入ります。'),
7    SizedBox(height: 16),
8    Row(
9      children: [
10        Icon(Icons.star, color: Colors.amber),
11        Text('4.5'),
12      ],
13    ),
14  ],
15)

注意点

スクロール: Column はスクロール機能を持っていません。長いコンテンツを表示する場合は、SingleChildScrollViewで Column を囲むか、ListViewを使用してください。
幅の制限: Column は子ウィジェットの幅に合わせてサイズが決まります。画面幅いっぱいに表示したい場合は、Expandedウィジェットを使用してください。
パフォーマンス: 大量のウィジェットを Column に配置する場合は、ListView.builderの使用を検討してください。

まとめ

Column ウィジェットは、Flutter アプリ開発において最も基本的で重要なレイアウトウィジェットの一つです。縦方向にウィジェットを並べる際の標準的な方法として、多くの場面で使用されます。

基本的な使い方：childrenプロパティにウィジェットのリストを渡す
スペーシング：SizedBoxを使用して要素間にスペースを追加
配置調整：mainAxisAlignmentとcrossAxisAlignmentで配置を制御
実践的な使用：フォームやカードの作成に活用

Column ウィジェットをマスターすることで、様々なレイアウトを作成できるようになります。次回は、横方向にウィジェットを並べるRowウィジェットについて学びましょう。

縦にWidgetを並べる

縦に Widget を並べる