動画
要約
- 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は何もしないという特徴があるので覚えておいてください。
外側のContainerがheightとwidthを指定しているので、LimitedBoxの指定は無視される
LimitedBoxはListViewとの組み合わせが効果的です。
デフォルトで親と同じサイズ持つようなwidgetがあります。例えば、Containerです。
このようなwidgetをListViewのアイテムとして使いたい場合、単純にListViewのitemとしてContainerを渡すだけではうまく動きません。
そのような場合は、ContainerをLimitedBoxでラップするように実装するとうまく動きます。
そのため、この例のように実装するとContainerのサイズが決まらず、リストは表示されない。
まとめ
Widget of the Weekの#39 LimitedBoxの日本語翻訳版でした。
Flutterではwidgetのサイズをいろいろな方法で指定することができ、LimitedBoxもその方法の１つです。
LimitedBoxでのサイズ指定は、固定の幅と高さを決めるのではなく、最大の幅と高さを決めるという特徴があります。
また、親のサイズ制限がある場合はそちらを優先してくれるという特徴もあります。
LimitedBoxのサイズ指定の特徴をしっかり押さえて、状況に応じて使い分けできるようにしておくと良さそうです。
■ 次の記事はこちら
#40 – Placeholder
■Widget of the Week まとめ
Widget of the Week 一覧