Flutter では子要素のwidthが親要素の幅のそれを超えると工事中のマークのような表示でエラーを示します。
RowやColumnのように、不特定多数の子要素を持つwidgetでは、エラー表示にならないように用途に応じて実装を行います。
実装の方針は以下のようになりますが
- 親要素の幅に収まらない場合はスクロールする(ScrollViewなどでの実装)
- 親要素の幅に収まらない場合は改行(列)する
Wrapは後者を実装するためのWidgetです。
Wrapは、親要素の範囲の中で横または縦に要素を並べた際に、はみ出た際は次の行または列を生成し要素を再度並べます。
サンプルコードと実装結果画像は以下になりますので、ご参考にいただければと思います。
サンプル:https://github.com/kiriko-rs/ui_day1
WrapのAPIDoc: https://api.flutter.dev/flutter/widgets/Wrap-class.html