[Flutter]「Columnウジェット」の使い方

Columnウジェットとは？

Columnウジェットは、ウェジェットを縦並びに表示するウェジェットです。

つまり、縦並びのレイアウトにするためのウェジェットということです。

使うには？

Columnウェジェットを使うには、次の２つのプロパティが必要す。

mainAxisAlignment

縦方向に並べるといっても、様々な並べ方があります。

こうした並べ方を指定するのが、mainAxisAlignmentプロパティです。

指定出来るものには、次のようなものがあります。

• .start：上から順に並べる
• .end：下から順に並べる
• .center：中央に並べる
• .spaceEvenly：均等に並べる
• .spaceBetween：均等に並べる（上下に余白なし）
• .spaceAround：均等に並べる（上下に少し余白あり）

children

もうひとつは、childrenプロパティです。

このプロパティは、表示するウェジェットを[]内に複数カンマ区切りで指定します。

使用例

Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(color: Colors.black,width: 50, height: 50,),
          Container(color: Colors.black,width: 50, height: 50),
          Container(color: Colors.black,width: 50, height: 50),
        ],
      )

並び方は、spaceEvenlyを指定し、childrenでContainerウェジェットを並べています。

まとめ

Columnは、縦並びのレイアウトを作るウジェットです。

使うには、並び方と並べるウェジェットを指定する必要があります。

オススメの記事

[Flutter]「ウジェット（Widget）」とは何？

2021.8.14 Flutterのウェジェットとは何なのでしょうか？

www.choge-blog.com

2021.08.14

[Flutter]「buildメソッド」とは何？

2021/8/15　Flutterで頻繁に登場するbuildメソッドとは何なのでしょうか？

www.choge-blog.com

2021.08.15