[Flutter]Containerを正方形にするには？

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

Containerを正方形にする方法を紹介します。

方法

Containerを正方形にする方法は２つあります。

引数

１つは、Containerの引数を使う方法です。

Containerは、引数「width」で横幅、引数「height」で高さを設定できます。

なので、この２つの引数に同じ値を指定すれば、正方形になります。

Container(
  width: 200,
  height: 200,
  color: Colors.blue,
)

AspectRatio

もう１つは、AspectRatioを使う方法です。

まず、「Container」を「AspectRatio」の「child」に指定します。

そして、AspectRatioの引数「aspectRatio」に「１」を指定します。

AspectRatio(
  aspectRatio: 1,
  child: Container(
    color: Colors.blue,
  ),
),

まとめ

Contanerを正方形にする方法は、引数「width」と引数「height」に同じ値を指定する方法とAspectRatioを使う方法の２つがあります。