[Flutter]Column(カラム)を横方向(horizontal)の中央(center)に表示するには？

どうも、ちょげ(@chogetarou)です。

Columnを横方向の中央に表示する方法を紹介します。

方法

Columnを横方向の中央に表示する方法は3つあります。

１つ目は、crossAxisAlignmentを使う方法です。

具体的には、Columnの引数「crossAxisAlignment」にCrossAxisAlignment.centerを指定します。

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    ・・・
  ],
),

注意点としては、crossAxisAlignment.centerを機能させるには、Columnの横幅を指定する必要があります。

横幅を指定しなければ、常に左に表示されます。

２つ目は、Rowウェジェットを使う方法です。

まず、ColumnをRowウェジェットの引数「children」に指定します。

そして、Rowウェジェットの引数「mainAxisAlignemnt」にMainAxisAlignment.centerを指定します。

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Column(
      children: [
        ・・・
      ],
    ),
  ],
),

３つ目は、Centerを使う方法です。

具体的には、ColumnウェジェットをCenterウェジェットでラップします。

Center(
  child: Column(
    children: [
      ・・・
    ],
  ),
),

Columnを中央に表示する方法には、次の３つがあります。