【Flutter】Widgetのサイズを変更できるSizedBoxの使い方【サンプルコードあり】

今回はWidgetのサイズを変更する時に便利なSizedBoxの使い方について紹介します。

つまり、Widgetのサイズを変えることができるWidgetって事になります。

Widgetって何？と思った方は「【Flutter】UI構築する際の基本、Widgetついて解説！【サンプルコードあり】」で詳しく解説しているので参考にしてみてください。

2021年1月4日【Flutter】UI構築する際の基本Widgetついて解説！【サンプルコードあり】

やはり見やすいUIを構築するためには、Widget一つ一つのサイズや間隔を適切に保って配置することは必須です。

そんな時に役立ってくれる、結構汎用性が高くて使いやすいWidgetなので是非覚えてみてください。

Containerとの違い

よく「Containerとの違いってなんですか？」と聞かれることがあります。

確かにどちらもWidgetの縦幅と横幅を指定してサイズ変更が可能ですが、大きな違いとしてSizedBoxは頭にconst（コンパイル定数）を付けることができます。

dart

const SizedBox(
  width: 200.0,
  height: 300.0,
  child: Card(child: Text('Hello World!')),
)

この様にconstをWidgetの頭に付けることでコンパイル時にそのWidgetをキャッシュしておくことができます。

つまり画面を再描画してもconstを付けたSizedBoxは再描画されずにキャッシュを再利用して描画するのでアプリのパフォーマンス向上に繋がります。

このconstはコンパイル時に状態を確定できるWidgetにしか付けられないのでContainerには付けることができません。

SizedBoxに限らず、constを付けられるWidgetについては積極的に使用するのがおすすめです。

なのでが僕が考える棲み分けとしては、

SizedBox：Widgetのサイズ変更のみの場合に使う
Container：Widgetのサイズ変更以外にもプロパティを設定したい場合に使う

になると考えています。

SizedBoxの使い方

SizedBoxの主な使い方は2種類あります。

Widgetのサイズを変えたい時
画面にスペース（間隔）を作りたい時

の2つです。順番に説明していきます。

Widgetのサイズを変えたい時

dart

SizedBox(
              height: 150, // Widgetの高さを指定
              width: 180, // Widgetの幅を指定
              child: RaisedButton(
                child: const Text('サイズ変更したボタン'),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ),

基本的なSizedBoxの使い方はこの用途だと思います。

記述の仕方は簡単で、サイズを変更したいWidgetをSizedBoxでラップして（囲んで）プロパティで「height」と「width」を指定してあげるだけです。

(heightは高さ、widthは幅を指定します。）

heightとwidthを画面最大まで広げたい場合は、「double.infinity」を指定してあげればそのWidget全ての可動域までサイズを広げることができます。

dart

              child: SizedBox(
                height: double.infinity,
                width: 180,
                child: RaisedButton(
                  child: const Text('サイズ変更したボタン'),
                  color: Colors.blue,
                  textColor: Colors.white,
                  onPressed: () {},
                ),
              ),

画面にスペース（間隔）を作りたい時

SizedBoxは子Widgetを持たなくても、単体で配置することで何も描画しないWidgetを作ることができます。

これは例えばボタンとボタンとの間に一定のスペースを開けたい時などに便利です。

開けたいスペースのサイズは同じくheightとwidthで自由に指定可能です。

dart

...
          children: [
            SizedBox(
              child: RaisedButton(
                child: const Text('Button'),
                color: Colors.orange,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ),
// -*-*-*-*-*-*- スペースを入れる -*-*-*-*-*-*-
            SizedBox(
              height: 100,
              width: 100,
            ),
// -*-*-*-*-*-*- スペースを入れる -*-*-*-*-*-*-
            SizedBox(
              height: 60,
              width: 120,
              child: RaisedButton(
                child: const Text('Button'),
                color: Colors.blue,
                textColor: Colors.white,
                onPressed: () {},
              ),
            ),
          ],
...

よく使うプロパティ

child

SizedBoxでサイズを変更したいWidgetをchildプロパティで指定することができます。

この後紹介する、heightとwidthのプロパティを指定しなければ何も変更はされません。

height/width

childプロパティで指定したWidgetをheightとwidthでサイズを変更することができます。

dart

          child: SizedBox(
            height: 200,
            width: 200,
            child: Container(
              color: Colors.green,
              child: Text('heightとwidthを指定するとサイズを変えられる'),
            ),
          ),

また、heightとwidthの引数に「double.infinity」を渡すことで可能な限りいっぱいにWidgetを広げることができます。

dart

          child: SizedBox(
            height: double.infinity,
            width: double.infinity,
            child: Container(
              color: Colors.green,
              child: Text('double.infinityを渡すといっぱいまでWidgetを広げられる'),
            ),
          ),

SizedBox.expand

SizedBox.expandを使うと、heightとwidthでdouble.infinityをわざわざ指定しなくてもいっぱいまでWidgetのサイズを変えることができます。

dart

          child: SizedBox.expand(
            child: Container(
              color: Colors.green,
              child: Text('SizedBox.expandを使うとheight、widthを指定しなくてもいっぱいまでサイズを変えられる'),
            ),
          ),