【Flutter】FittedBox|BoxFitでサイズを指定しWidgetを格納

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

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

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

目次

FittedBoxの使い方

Container(
  width: 250,
  height: 150,
  color: Colors.blue,
  child: FittedBox(
    fit: BoxFit.contain,
    child: Text(
      'Hello World',
      style: TextStyle(
        fontSize: 100,
        color: Colors.white,
      ),
    ),
  ),
),

fitの引数にBoxFitを渡してchildのサイズを調整できます。

デフォルトはBoxFit.contain です。

FittedBoxあり

FittedBoxなし

FittedBoxなし

BoxFitの使い方

BoxFit.contain

親Widgetに丁度格納されるサイズまで広がります。

BoxFit.cover

親Widgetを完全に覆えるサイズ丁度になるまで広がります。

BoxFit.fill

親Widgetのアスペクト比になるよう縮小・拡大します。

BoxFit.fitHeight

アスペクト比を保ったまま親Widgetの高さいっぱい広がります。

BoxFit.fitWidth

アスペクト比を保ったまま親Widgetの横幅いっぱい広がります。

BoxFit.none

元のサイズのまま親Widget上で配置されます。

BoxFit.scaleDown

親Widgetに丁度格納されるサイズまで縮小します。(拡大はしない)

一緒に読みたい

参考

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