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

by

rectangle_large_type_2_cf4617af00f19a8c731c22aa5d1cf29b

こんにちは、中尾 陽菜です。
今回、FlutterのColumnとRowについて紹介します。

Column

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

 

縦に並べる

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

Column(
    children: [
        Text('1列目'),
        Text('2列目'),
        Text('3列目'),
    ],
)

 

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

縦に並べる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('1行目'),
    Text('2行目'),
    Text('3行目'),
  ],
)

 

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

横に並べる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として
位置調整していると覚えています。

中尾 陽菜
20年卒。
趣味:洋画鑑賞、万年筆インク集め、ハンドメイド
最近、紅茶の缶などのお洒落な缶を集めることに嵌っています!

Egg Device Application

東京品川のスマホアプリ製作・開発会社です。
一般アプリ業務用アプリからVRアプリまで開発可能。

求人情報

スマホアプリ製作・開発の
相談を受け付けています

メールでのご相談

お電話でのご相談
TEL 03-5422-7524
平日10:00~18:00