【日本語版】【Flutter】Widget of the Week – #48 ConstrainedBox【要約】

動画

要約

  • ConstrainedBoxを使うと、widgetに対して、幅と高さに対して、最大値、最小値を指定することができる。
  • 例えば、Text widgetの場合、ConstrainedBoxで指定した幅を超える場合は自動で次の行に折り返す。

内容

Widgetのサイズ調整の方法はいろいろありますが、ConstrainedBoxもその一つです。

ConstrainedBoxは子widgetの高さや幅に対して、最大値、最小値を制限できます。

使い方は簡単です。

widgetをConstrainedBoxでラップし、maxHeight、maxWidth、minHeight、minWidthを指定したBoxConstrainsをconstrainsに渡すだけです。
 

maxWidth、maxHeightを指定したパターン

minHeightを指定して、高さがそれより小さいwidgetを引き伸ばすことも可能です。
 

minHeightを指定したパターン

まとめ

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

ConstrainedBoxを使うことで、widgetの大きさを制御することができるようになります。

画面のレイアウトを考える際、「どんなwidgetもこれ以上、これ以下の大きさにはならない」ということがわかるととても便利です。

状況に応じてうまく使いこなせると良さそうです。

■ 次の記事はこちら
作成中

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