［Flutter］ColumnとRowの方向がごっちゃになるので整理してみた

こんにちは、ヒナです。
今回、FlutterのColumnとRowについて紹介します。

Column

Column Widgetを使うことで、Widgetを縦に並べることができます。

縦に並べる

縦にWidgetを並べるときは、Column Widgetを使い、children に並べたいWidget一覧を指定します。

Column(
    children: [
        Text('１列目'),
        Text('２列目'),
        Text('３列目'),
    ],
)

列の中央寄せ・下寄せ・均等配置

縦に並べるWidgetの配置を変えるときは、 mainAxisAlignment を指定します。

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[],
)

基本位置調整一覧
中央寄せ：mainAxisAlignment.center
下寄せ　：mainAxisAlignment.end
均等配置：mainAxisAlignment. spaceEvenly

左寄せ・右寄せ

縦に並べたWidgetの横方向の配置を変えるときは、 crossAxisAlignment を指定します。

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[],
)

基本位置調整一覧
左寄せ：CrossAxisAlignment.start
右寄せ：CrossAxisAlignment.end

Row

Row Widgetを使うことで、Widgetを横に並べることができます。

横に並べる

横にWidgetを並べるときは、Row Widgetを使い、children に並べたいWidget一覧を指定します。

Row(
  children: <Widget>[
    Text('１行目'),
    Text('２行目'),
    Text('３行目'),
  ],
)

中央寄せ・右寄せ・均等配置

横に並べるWidgetの配置を変えるときは、 mainAxisAlignment を指定します。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[],
)

基本位置調整一覧
中央寄せ：MainAxisAlignment.center
右寄せ　：MainAxisAlignment.end
均等配置：MainAxisAlignment.spaceEvenly

上寄せ・下寄せ

横に並べたWidgetの縦方向の配置を変えるときは、 crossAxisAlignment を指定します。

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[],
)

基本位置調整一覧
上寄せ：CrossAxisAlignment.start
下寄せ：CrossAxisAlignment.end

まとめ

縦に並べるときは Column Widget、横に並べるときは Row Widgetを使います。
ColumnかRowかによってmainAxisAlignmentとcrossAxisAlignmentの位置調整の方向が変わるので、
注意してください。

私は、ColumnとRowの方向がごっちゃになることが多いので、
Column、Rowが伸びる方向をmainとして、それと直角に交わる方向をcrossとして
位置調整していると覚えています。

ライタープロフィール

【N】
Webエンジニアの経験を経て、アプリエンジニアとしてEDAに入社。
Flutter開発導入のファシリテーターとして、勉強会などを担当している。