【Flutter】AspectRatio|高さと横幅をアスペクト比で指定

今回はAspectRatioの基本的な使い方を紹介します。

AspectRatioを使えば指定したWidgetの高さと横幅をheight widthを使用せず、アスペクト比でサイズ調整できます。

\ 世界最大級のオンライン学習サービス /

目次

AspectRatioの使い方

AspectRatio(
  aspectRatio: 3 / 4, //3:4
  child: Container(
    color: Colors.blue,
  ),
),

アスペクト比でサイズを調整したいWidgetをラップしたらaspectRatioでアスペクト比を指定します。

aspectRatioの引数は「横幅:高さ」を「横幅 / 高さ」で指定できます。

ConstrainedBoxと相性良し

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 100,
    maxHeight: 200,
  ),
  child: AspectRatio(
    aspectRatio: 3 / 4,
    child: Container(
      color: Colors.blue,
    ),
  ),
),

AspectRatioではアスペクト比でWidgetのサイズが調整されるので、サイズの最小値・最大値を指定したい場合はConstrainedBoxと一緒に使用するのがオススメです。

ConstrainedBoxあり

ConstrainedBoxなし

一緒に読みたい

参考

  • URLをコピーしました!
目次