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

SizedBox
この記事がおすすめな人
  • Flutterアプリ開発初心者
  • 英語のFlutterドキュメントを読むのが難しい
  • SizedBox Widgetの基本的な使い方が知りたい
SizedBox (Flutter Widget of the Week)

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

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

スポンサーリンク

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の幅を指定します。

SizedBox1
SizedBox(height:300, width:300)
SizedBox2
SizedBox(height:300)
SizedBox3
SizedBox()

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

double.infinityでサイズを指定

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

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

double.infinity

SizedBox.expand

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

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

SizedBox.expand
タイトルとURLをコピーしました