[Flutter]Column(カラム)を画面中央(screen center)に表示するには？

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

Columnを画面中央に表示する方法を紹介します。

方法

Columnを画面中央に表示する方法は２つあります。

１つは、引数「mainAxisAlignment」を使う方法です。

具体的な方法としては、Columnの引数「mainAxisAlignment」にMainAxisAlignment.centerを指定します。

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

もう１つは、Centerウェジェットと引数「mainAxisSize」を使う方法です。

まず、ColumnをCenterでラップします。

そしてColumnの引数「mainAxisSize」にMainAxisSize.minを指定します。

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      ・・・
    ],
  ),
),

Columnを画面中央に表示する方法は次の２つです。