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

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

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

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

【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種類あります。

  1. Widgetのサイズを変えたい時
  2. 画面にスペース(間隔)を作りたい時

の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を指定しなくてもいっぱいまでサイズを変えられる'),
            ),
          ),

まとめ

個人的にはこのSizedBoxはかなり汎用性が高くてお気に入りのWidgetの1つです。

皆さんもうまく使って見やすいUIを構築してみてください。

Flutterについて基本を体系的に学習したい方はこちらの書籍がおすすめです!

Flutter初心者向けにアプリ開発実践シリーズの記事も掲載しているのでよければそちらもどうぞ!

【Flutter/アプリ開発】スクレイピングを利用して副業案件検索アプリを作ってみよう!

【Flutter初心者向け】ルーレットアプリを作って今晩の夕食を決めてみた【ソースコピペOK】

おわり

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です