【Flutter】SizedBoxの基本的な使い方

「SizedBox Widget」を使えば、childのサイズを自由に指定したり、スクリーンに空白のスペースを作ることができます。

SizedBoxの基本となるプロパティ

• child：サイズを調整するWidgetを指定
• height/width：childの高さ/幅を指定

child

SizedBox(
  child: Container(
    height: 100,
    width: 100,
    color: Colors.orange,
  ),
),

childプロパティで、SizedBoxでサイズを調整したいWidgetを指定します。またSizedBoxでheightやwidthプロパティを使用しない場合、childのサイズは変更されません。

height/width

SizedBox(
  height: 300,
  width: 300,
  child: Container(
    height: 100,
    width: 100,
    color: Colors.orange,
  ),
),

heightプロパティでchildの高さ、widthプロパティでchildの幅を指定します。

SizedBoxで指定したサイズがchildで指定したサイズよりも優先的に反映されます。

double.infinityでサイズを指定

SizedBox(
  height: double.infinity,
  width: double.infinity,
  child: MyWidget(),
),

またheight/widthプロパティの引数に「double.infinity」を使えば、childのサイズはparent Widgetが許す範囲いっぱいまで広げることができます。

SizedBox.expand

SizedBox.expand(
  child: MyWidget(),
),

SizedBox.expandを使えば、heightとwidthプロパティの両方で「double.infinity」を使わなくても自動的にchildのサイズをparent Widgetが許す範囲いっぱいまで広げることができます。