【日本語版】【Flutter】Widget of the Week – #39 LimitedBox【要約】

動画

要約

  • Containerのように親に指定されたサイズになるwidgetはListViewなど子供のサイズを制限しないwidgetにそのまま入れるとうまく動かない
  • そんなときはContainerをLimitedBoxでラップして、Containerにデフォルトサイズを与えるとうまく表示される

内容

Containerなどの一部のwidgetは、親によって定義された制約に従ってサイズを設定します。

しかし、全てのwidgetが子供のサイズを定義するわけではありません。

ListViewのRowやColumnなどのwidgetは、子供のサイズを指定しません。

このような場合は、LimitedBoxを使って、子widgetにデフォルトのサイズを与えましょう。

使い方は簡単で、widgetをLimitedBoxでラップし、maxHeightとmaxWidgetを与えるだけです。

    LimitedBox(
      maxHeight: 150,
      maxWidth: 150,
      child: Container(
        color: Colors.green,
      ),
    );

これだけで、親がサイズを指定していない場合はLimitedBoxで与えた制限をもとにchildのサイズが決まります。

もし、親がサイズを指定していた場合、LimitedBoxは何もしないという特徴があるので覚えておいてください。
 

例えば、この画像の例だと、LimitedBoxはmaxHeightとmaxWeightを150に指定しているが、
外側のContainerがheightとwidthを指定しているので、LimitedBoxの指定は無視される
結果、widgetのheightとwidthは300pxになる

LimitedBoxはListViewとの組み合わせが効果的です。

デフォルトで親と同じサイズ持つようなwidgetがあります。例えば、Containerです。

このようなwidgetをListViewのアイテムとして使いたい場合、単純にListViewのitemとしてContainerを渡すだけではうまく動きません。

そのような場合は、ContainerをLimitedBoxでラップするように実装するとうまく動きます。
 

ListViewは子widgetのサイズを制限しない。
そのため、この例のように実装するとContainerのサイズが決まらず、リストは表示されない。
間にLimitedBoxを入れて、Containerのデフォルトサイズ(最大高さ)を指定してやる。
そうするとうまく動く

まとめ

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

Flutterではwidgetのサイズをいろいろな方法で指定することができ、LimitedBoxもその方法の1つです。

LimitedBoxでのサイズ指定は、固定の幅と高さを決めるのではなく、最大の幅と高さを決めるという特徴があります。

また、親のサイズ制限がある場合はそちらを優先してくれるという特徴もあります。

LimitedBoxのサイズ指定の特徴をしっかり押さえて、状況に応じて使い分けできるようにしておくと良さそうです。

■ 次の記事はこちら
#40 – Placeholder

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