【日本語版】【Flutter】Widget of the Week – #29 SizedBox【要約】

動画

要約

  • 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にinfinityを指定すると、
高さが最大まで広がる

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

sizedBox.expandを使えば、height、widthの指定を省略できる

SizedBoxはchild無しでも使えます。

widget間にスペースを設けたい場合などに使うと良いでしょう。
 

空のSizedBoxを使うことで、
widgetの間にスペースをつくることができる。

まとめ

Widget of the Weekの#29 SizedBoxの日本語翻訳版でした。

SizedBoxは非常に使い勝手が良く、使う場面がとても多いwidgetです。
開発者は自分の思い通りにwidgetのサイズを制御することができます。

■ 次の記事はこちら
#30 – ValueListenableBuilder

■Widget of the Week まとめ
Widget of the Week 一覧