今回はWidgetのサイズを変更する時に便利なSizedBoxの使い方について紹介します。
つまり、Widgetのサイズを変えることができるWidgetって事になります。
Widgetって何?と思った方は「【Flutter】UI構築する際の基本、Widgetついて解説!【サンプルコードあり】」で詳しく解説しているので参考にしてみてください。
![](https://gakogako.com/wp-content/uploads/2021/01/widget.png)
やはり見やすいUIを構築するためには、Widget一つ一つのサイズや間隔を適切に保って配置することは必須です。
そんな時に役立ってくれる、結構汎用性が高くて使いやすいWidgetなので是非覚えてみてください。
目次
Containerとの違い
よく「Containerとの違いってなんですか?」と聞かれることがあります。
確かにどちらもWidgetの縦幅と横幅を指定してサイズ変更が可能ですが、大きな違いとしてSizedBoxは頭にconst(コンパイル定数)を付けることができます。
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のサイズを変えたい時
SizedBox(
height: 150, // Widgetの高さを指定
width: 180, // Widgetの幅を指定
child: RaisedButton(
child: const Text('サイズ変更したボタン'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
),
![](https://gakogako.com/wp-content/uploads/2021/01/simulator_screenshot_B67A0EC4-C373-4269-8A9E-9EFA84932F5C-193x417.png)
基本的なSizedBoxの使い方はこの用途だと思います。
記述の仕方は簡単で、サイズを変更したいWidgetをSizedBoxでラップして(囲んで)プロパティで「height」と「width」を指定してあげるだけです。
(heightは高さ、widthは幅を指定します。)
heightとwidthを画面最大まで広げたい場合は、「double.infinity」を指定してあげればそのWidget全ての可動域までサイズを広げることができます。
child: SizedBox(
height: double.infinity,
width: 180,
child: RaisedButton(
child: const Text('サイズ変更したボタン'),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
),
),
![](https://gakogako.com/wp-content/uploads/2021/01/simulator_screenshot_3DC47456-7821-40F7-A9BA-E8CAFEDCB518-193x417.png)
画面にスペース(間隔)を作りたい時
SizedBoxは子Widgetを持たなくても、単体で配置することで何も描画しないWidgetを作ることができます。
これは例えばボタンとボタンとの間に一定のスペースを開けたい時などに便利です。
開けたいスペースのサイズは同じくheightとwidthで自由に指定可能です。
...
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: () {},
),
),
],
...
![](https://gakogako.com/wp-content/uploads/2021/01/simulator_screenshot_657BB57F-F100-4344-87DA-390758CF20CE-193x417.png)
よく使うプロパティ
child
SizedBoxでサイズを変更したいWidgetをchildプロパティで指定することができます。
この後紹介する、heightとwidthのプロパティを指定しなければ何も変更はされません。
![](https://gakogako.com/wp-content/uploads/2021/10/Simulator-Screen-Shot-iPhone-12-2021-10-06-at-18.05.34-185x400.png)
height/width
childプロパティで指定したWidgetをheightとwidthでサイズを変更することができます。
child: SizedBox(
height: 200,
width: 200,
child: Container(
color: Colors.green,
child: Text('heightとwidthを指定するとサイズを変えられる'),
),
),
![](https://gakogako.com/wp-content/uploads/2021/10/Simulator-Screen-Shot-iPhone-12-2021-10-06-at-18.52.51-185x400.png)
また、heightとwidthの引数に「double.infinity」を渡すことで可能な限りいっぱいにWidgetを広げることができます。
child: SizedBox(
height: double.infinity,
width: double.infinity,
child: Container(
color: Colors.green,
child: Text('double.infinityを渡すといっぱいまでWidgetを広げられる'),
),
),
![](https://gakogako.com/wp-content/uploads/2021/10/Simulator-Screen-Shot-iPhone-12-2021-10-06-at-18.51.47-185x400.png)
SizedBox.expand
SizedBox.expandを使うと、heightとwidthでdouble.infinityをわざわざ指定しなくてもいっぱいまでWidgetのサイズを変えることができます。
child: SizedBox.expand(
child: Container(
color: Colors.green,
child: Text('SizedBox.expandを使うとheight、widthを指定しなくてもいっぱいまでサイズを変えられる'),
),
),
![](https://gakogako.com/wp-content/uploads/2021/10/Simulator-Screen-Shot-iPhone-12-2021-10-06-at-18.58.10-185x400.png)
まとめ
個人的にはこのSizedBoxはかなり汎用性が高くてお気に入りのWidgetの1つです。
皆さんもうまく使って見やすいUIを構築してみてください。
このブログでは他にもFlutter初心者向けの記事も掲載しているのでよければそちらもどうぞ!
![](https://gakogako.com/wp-content/uploads/2022/04/flutter_book-160x160.png)
![](https://gakogako.com/wp-content/uploads/2022/09/flutter_elevated_button-160x160.png)
![](https://gakogako.com/wp-content/uploads/2022/05/flutter_spacer-160x160.png)
おわり