【Flutter】ConstrainedBox|Widgetのサイズの最大値・最小値を指定

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

ConstrainedBoxでは指定したWidgetの「高さ」と「横幅」の最大値・最小値を指定できます。

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

目次

ConstrainedBoxの使い方

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 100,
    maxHeight: 200,
  ),
  child: Container(
    width: 1000, //1000 -> 200
    height: 1000, //1000 -> 200
    color: Colors.blue,
  ),
),

constrainsの引数にBoxConstraintsを渡してWidgetの最大値・最小値を指定します。

ConstrainedBoxでラップしたWidgetのサイズがBoxConstraintsで指定したサイズより大きいまたは小さい場合、BoxConstraintsで指定したサイズに調整されます。

width: 1000, height: 1000

width: 200, height: 200

width: 10, height: 10

width: 100, height: 100

AspectRatioと相性良し

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をコピーしました!
目次