![](https://blog.flutteruniv.com/wp-content/themes/cocoon-master/images/ojisan.png)
Column
ってよく使うけれど、縦に並べるだけじゃないのかな?
![](https://blog.flutteruniv.com/wp-content/themes/cocoon-master/images/obasan.png)
各プロパティの設定でどんな影響があるのか知りたいわ!
本記事ではそんな疑問、要望にお答えします。
Flutterで度々使用する Column の使い方について解説します。
Columnに用意されているプロパティを変化させた時にどんな挙動を示すのか知ることができます。
触って確認できるDartPadも用意しているので、ぜひ読んでみてください!
Column の基本的な使い方
Column
の基本的な使い方です。
children
プロパティに複数のWidget
を設定することで、
設定したWidgetを縦に並べることができます。
Column(
children: [
Container(
width: sizeRed,
height: sizeRed,
color: Colors.red,
child: const Center(child: Text('red')),
),
Container(
width: sizeBlue,
height: sizeBlue,
color: Colors.blue,
child: const Center(child: Text('blue')),
),
Container(
width: sizeGreen,
height: sizeGreen,
color: Colors.green,
child: const Center(child: Text('green')),
)
],
),
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-21.37.01.png)
簡単に縦に並べて配置できるので、画面レイアウトの基本のWidget
として用いられます。
Column の各プロパティについて
本章では、Column
の各プロパティについて、設定によりどんな違いがあるのか紹介します。
DartPad
各プロパティについて、実際に変更すると、どうレイアウトが変わるのか、
触って確かめることのできるDartPadを作成しました。
本記事を読みながら、自分でもぜひ触って検証してみてください。
mainAxisSize プロパティ
mainAxisSize
プロパティについて解説します。
このプロパティに設定できるのはMainAxisSize
で、これは以下の2つの値のenum
となっています。
MainAxisSize.max
MainAxisSize.min
MainAxisSize.max
MainAxisSize.max
は、Column
のchildren
で埋まった領域に対する
残りの領域を縦方向に最大化するプロパティです。
例えば、最大400の高さのContainer
のうち、Column
のchildren
が300専有していたとしたら、
残りの領域の100をフルに使ってスペースを取ろうとします。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-21.37.01.png)
次のmin
と比較するとわかりやすいので、min
の場合を確認しましょう。
MainAxisSize.min
MainAxisSize.min
は、Column
のchildren
で埋まった領域に対する
残りの領域を縦方向に最小化するプロパティです。
例えば、最大400の高さのContainer
のうち、Column
のchildren
が300専有していたとしたら、
残りの領域の100を最小化するため余りのスペースはなくなります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-21.57.00.png)
mainAxisAlignment プロパティ
main
プロパティについて解説します。AxisAlignment
このプロパティに設定できるのはMainAxis
で、Alignment
これは以下の6つの値のenum
となっています。
MainAxisAlignment.start
MainAxisAlignment.center
MainAxisAlignment.end
MainAxisAlignment.spaceAround
MainAxisAlignment.spaceBetween
MainAxisAlignment.spaceEvenly
MainAxis
(Column
の場合縦方向)のAlignment
(配置)に関するプロパティです。
MainAxisAlignment.start
MainAxisAlignment.start
は縦並びの最前の位置から順に詰めてchildren
のWidget
を配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-21.37.01.png)
MainAxisAlignment.center
MainAxisAlignment.center
は縦並びの中央に詰めてchildren
のWidget
を配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.18.41.png)
MainAxisAlignment.end
MainAxisAlignment.end
は縦並びの最後部の位置から順に詰めてMainAxisAlignment.end
children
のWidget
を配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.20.48.png)
MainAxisAlignment.spaceAround
はMainAxisAlignment.spaceAround
children
のWidget
の上下に均等にスペースを配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.23.20.png)
MainAxisAlignment.spaceBetween
はMainAxisAlignment.spaceBetween
children
のWidget
の1番最初と最後を端に配置し、
残りのWidget
をスペースが同じ大きさになるように配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.26.20.png)
MainAxisAlignment.spaceEvenly
はMainAxisAlignment.spaceEvenly
children
のWidget
を残りのスペースが同じ大きさになるように配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.28.56.png)
crossAxisAlignment プロパティ
cross
プロパティについて解説します。AxisAlignment
このプロパティに設定できるのはCrossAxis
で、Alignment
これは以下の5つの値のenum
となっています。
CrossAxisAlignment.start
CrossAxisAlignment.center
CrossAxisAlignment.end
CrossAxisAlignment.stretch
CrossAxisAlignment.baseline
CrossAxis
(Column
の場合横方向)のAlignment
(配置)に関するプロパティです。
最後のCrossAxisAlignment.baseline
はColumn
の場合影響ないため、
残りの4つについて解説を行います。
CrossAxisAlignment.start
CrossAxisAlignment.start
は横方向の最初の位置(デフォルトは左)に寄せてchildren
のWidget
を配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.48.28.png)
CrossAxisAlignment.center
CrossAxisAlignment.center
は横方向の中央に寄せてchildren
のWidget
を配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-21.37.01.png)
CrossAxisAlignment.end
CrossAxisAlignment.end
は横方向の最後の位置(デフォルトは右)に寄せてchildren
のWidget
を配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.51.41.png)
CrossAxisAlignment.stretch
CrossAxisAlignment.stretch
はchildren
のWidget
を可能な限り横方向に拡張して配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.54.14.png)
verticalDirection プロパティ
verticalDirection
プロパティについて解説します。
このプロパティに設定できるのは
で、VerticalDirection
これは以下の2つの値のenum
となっています。
.downVerticalDirection
.upVerticalDirection
Widget
の配置方向を管理するプロパティとなります。
VerticalDirection
.down
VerticalDirection
.down
は
.downVerticalDirection
children
のWidget
を上から下へ配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-21.37.01.png)
VerticalDirection
.
up
VerticalDirection
.
up
は
.upVerticalDirection
children
のWidget
を下から上へ配置する設定となります。
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-23.03.28.png)
MainAxisAlignment.start
の開始位置も上から下へ変更となります。
textDirection プロパティ
textDirection
プロパティについて解説します。
このプロパティに設定できるのは
で、TextDirection
これは以下の2つの値のenum
となっています。
.ltrTextDirection
.rtlTextDirection
TextDirection
.ltr
TextDirection
.ltr
は
.ltrTextDirection
children
のWidget
を横方向の開始位置を左に設定する設定となります。
と
.ltrTextDirection
CrossAxisAlignment.start
を設定した場合の画像
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-22.48.28.png)
TextDirection
.rtl
TextDirection
.rtl
は
.rtlTextDirection
children
のWidget
を横方向の開始位置を右に設定する設定となります。
と
.rtlTextDirection
CrossAxisAlignment.start
を設定した場合の画像
![](https://blog.flutteruniv.com/wp-content/uploads/2022/06/スクリーンショット-2022-06-10-23.14.07.png)
まとめ
Flutterで度々使用する Column の使い方について解説しました。
Columnに用意されているプロパティを変化させた時にどんな挙動を示すのか紹介しました。
いかがだったでしょうか?
本記事でプロパティでできることは列挙しましたので、
カタログのように使って自分のアプリのレイアウトに役立ててもらえればと思います。
本記事があなたのアプリ開発の一助となれば幸いです。
編集後記(2022/6/10)
6月も気がつけば10日が経ち、関東は梅雨入りが発表されましたね。
雨は余りすきではないので、この時期は少し憂鬱となります。
早く梅雨が開けて、楽しい夏が来てほしいものです。
あなたは梅雨について、どう思いますか?
よければぜひ感想をお知らせください。
週刊Flutter大学では、Flutterに関する技術記事、Flutter大学についての紹介記事を投稿していきます。
記事の更新情報はFlutter大学Twitterにて告知します。
ぜひぜひフォローをお願いいたします。