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

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

\ Widgetの扱い方が不安な方はこちら！ /

【Flutter】Widget・Widgetツリーの基本的な仕組み ｜ FlutterアプリのUI構造

Flutterアプリでアプリ開発する上で始めに理解しておきたい「Widget」について紹介します。Widgetとは、FlutterのUIを構築しているパーツのことを呼び、FlutterアプリはこのWidgetがツリー状(Widget)に組み合わさって構築されています。また、Widgetはクラスをインスタンス化したオブジェクトでもあります。

flutternyumon.com

2021.04.14

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が許す範囲いっぱいまで広げることができます。