[Flutter]Containerにアスペクト比を設定するには？

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

Containerにアスペクト比を設定する方法を紹介します。

方法

Containerのサイズをアスペクト比を設定するには、AspectRatioウェジェットを使います。

まず、ContainerウェジェットをAspectRatioの「child」に指定します。

AspectRatio(
  child: Container(),
),

そして、AspectRatioの引数「aspectRatio」にアスペクト比を指定します。

アスペクト比は、「横幅 ÷ 高さ」を設定します。

「横幅 / 高さ」とすれば、分かりやすく出来ます。

AspectRatio(
  aspectRatio: /* 「横幅/高さ」 */,
  child: Container(),
),

以下は、使用例です。

AspectRatio(
  aspectRatio: 3 / 2, //横幅：高さ = 3 : 2
  child: Container(
    padding: EdgeInsets.all(20),
    color: Colors.blue,
  ),
),