0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Wrapを実装してみた

Last updated at Posted at 2020-05-02

Flutter では子要素のwidthが親要素の幅のそれを超えると工事中のマークのような表示でエラーを示します。
RowやColumnのように、不特定多数の子要素を持つwidgetでは、エラー表示にならないように用途に応じて実装を行います。

実装の方針は以下のようになりますが

  • 親要素の幅に収まらない場合はスクロールする(ScrollViewなどでの実装)
  • 親要素の幅に収まらない場合は改行(列)する

Wrapは後者を実装するためのWidgetです。
Wrapは、親要素の範囲の中で横または縦に要素を並べた際に、はみ出た際は次の行または列を生成し要素を再度並べます。

サンプルコードと実装結果画像は以下になりますので、ご参考にいただければと思います。

image.png

サンプル:https://github.com/kiriko-rs/ui_day1

WrapのAPIDoc: https://api.flutter.dev/flutter/widgets/Wrap-class.html

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?