「垂直に複数のウィジェットを並べたい」
こんな時に便利なのが Column ウィジェットです。
Columnを使用することで複数のウィジェットを垂直に並べられます。また並んでいるウィジェットの配置を指定したり、逆順にしたりなどできます。
それではColumnの基本的な使い方とカスタマイズ方法について解説していきます！
基本的な使い方
Columnの基本的な使い方について解説します。
Columnで複数のウィジェットを垂直に並べるにはchildrenプロパティにウィジェットが入る配列を渡し、配列にウィジェットを追加します。
Column(
children: [
WidgetA(),
WidgetB(),
WidgetC(),
],
),画像のサンプルコード
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Flutter')),
body: Center(
child: Column(
children: [
Container(
width: 120,
height: 120,
color: Colors.red,
),
Container(
width: 120,
height: 120,
color: Colors.amberAccent,
),
Container(
width: 120,
height: 120,
color: Colors.blue,
),
],
),
),
);
}
}
カスタマイズ方法
続いてColumnのカスタマイズ方法について解説します。
垂直方向の並びを逆順にする
Columnの垂直方向の並びを下から上の逆順にするにはverticalDirectionプロパティの引数にVerticalDirection.upを渡します。
デフォルトはVerticalDirection.downで上から下にウィジェットが並びます。
Column(
verticalDirection: VerticalDirection.up,
children: [...],
),垂直方向の配置
Columnの垂直方向の配置はmainAxisAlignmentプロパティで設定できます。
mainAxisAlignmentプロパティの引数にMainAxisAlignmentウィジェットの列挙型(enum)を渡すことで次のような様々な配置を指定できます。
| 列挙型 | 配置 |
|---|---|
| MainAxisAlignment.start | 上寄せ |
| MainAxisAlignment.center | 中央寄せ |
| MainAxisAlignment.end | 下寄せ |
| MainAxisAlignment.spaceAround | それぞれの要素の上下に均等なスペースを空ける |
| MainAxisAlignment.spaceBetween | 要素同士の間に均等なスペースを空ける |
| MainAxisAlignment.spaceEvenly | 先頭の要素の前、要素同士の間、末尾の要素の後に 均等なスペースを空ける |
Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [...],
),また先ほど解説したverticalDirectionプロパティでVerticalDirection.up(下から上の並び)にしている場合は上寄せと下寄せが逆になります。
水平方向の配置
Columnの水平方向の配置はcrossAxisAlignmentプロパティで設定できます。
crossAxisAlignmentプロパティの引数にCrossAxisAlignmentウィジェットの列挙型(enum)を渡すことで次のような様々な配置を指定できます。
| 列挙型 | 配置 |
|---|---|
| CrossAxisAlignment.start | 左寄せ |
| CrossAxisAlignment.center | 中央寄せ |
| CrossAxisAlignment.end | 右寄せ |
| CrossAxisAlignment.stretch | 親ウィジェットが許す範囲まで横いっぱいに広がる |
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: [...],
),Columnではあまり使用しないのですがtextDirectionプロパティでTextDirection.rtlにしている場合は左寄せと右寄せが逆になります。このtextDirectionプロパティはRowで水平方向の要素を逆順にする際などに使用されます。
まとめ
今回はColumnの基本的な使い方とカスタマイズ方法について解説しました。
Columnを使用することで複数のウィジェットを垂直に並べられます。また並んでいるウィジェットの配置を指定したり、逆順にしたりなどできるのでぜひ使ってみてください。