動画
要約
- widgetを特定のサイズにしたい場合はSizedBoxを使おう
- SizedBoxでwidgetをラップしてheight、widthを指定するだけ
- SizedBox.expandでいっぱいに広げることもできる
- 空のSizedBoxでwidget間に余白を確保する、という使い方もできる
内容
widgetを特定のサイズにしたい場合があります。
FlutterではSizedBoxを使って簡単に実現できます。
SizedBoxは特定のサイズを持つwidgetで、子widgetを同じサイズにしてくれます。
使い方は簡単です。SizedBoxでwidgetをラップし、widthにpixelの幅を指定するだけです。

もちろん、heightも指定できます。

次のように、widthにinfinity(無限)を指定した場合はどうなるでしょうか?

widthにinfinityを指定した場合は、親widgetが許容する範囲内でいっぱいに広がります。

heightも同様です。


height、width両方にinfinityを指定する場合は、かわりにSizedBox.expandを使うこともできます。

SizedBoxはchild無しでも使えます。
widget間にスペースを設けたい場合などに使うと良いでしょう。


まとめ
Widget of the Weekの#29 SizedBoxの日本語翻訳版でした。
SizedBoxは非常に使い勝手が良く、使う場面がとても多いwidgetです。
開発者は自分の思い通りにwidgetのサイズを制御することができます。
■ 次の記事はこちら
#30 – ValueListenableBuilder
■Widget of the Week まとめ
Widget of the Week 一覧