プログラミングスクール最大70%OFF! ←クリックして見に行く

【Flutter】Widget of the Week #3 Wrap

【Flutter】Widget of the Week #3 Wrap

どーも!りゅうです(「・ω・)「

今回紹介するのは、
Googleさん公式Youtube「Widget of the Week」で紹介されている、
ウィジェットのサンプル集第3回目は Wrap です!

Wrapってなに?

直訳すると「包む」であり、
Wrapで包むことによって、画面からはみ出したコンテンツを折り返して表示してくれるウィジェット
です\_(・ω・`)ココ重要!

公式からの説明は以下の通り。

row や columnを作るスペースがなくなったら、wrap を使ってみましょう! wrap ウィジェットで子要素を column や row のようにレイアウトでき、スペースがなくなったら次の行に wrap できます。direction 、alignment、spacing などのプロパティでお望み通りのスタイルが作れます。

公式Youtubeより引用

公式の動画で概要を把握

まずは1分程度の公式の動画「Widget of the Week」で概要を把握しましょう!

概要をなんとなく把握できたところで、
Widgetの有無の差を見ていきましょう(∩’-‘⊂)シュッ
※4つの四角を表示する場合の例です

Wrap Widgetなしの場合

Attention

右側に106ピクセル足りないよ!という以下エラーがコンソールに表示されます。
A RenderFlex overflowed by 106 pixels on the right.

Wrap Widgetありの場合

Point

4個目のウィジェットが一番右に表示できないので、
空気を読んで次の行に移動しました。

Sample Code

コピペで動くサンプルコードの紹介です!

①Wrap

Wrap Widgetありの場合のサンプルコードです!

・構造をざっくり解説!!
4つの黄色い四角をWrapウィジェットで囲っています。

②Wrap – direction –

27行目にdirection: Axis.vertical,プロパティを追加して、
要素の並びを縦に指定しました。

Point

direction: Axis.horizontal,で横並びに指定することもできますが、
デフォルトが横向きなので明示する必要がなければ不要です。

③Wrap – spacing –

28行目にspacingプロパティを追加し、
要素間のスペース幅を指定しました。

Memo

40行目でコンテナ間にマージンを作成してしまっているので、
EdgeInsets.all, の値を0にした上でスペースを追加してます。

④Wrap – runSpacing –

29行目にrunSpacingプロパティを追加し、
要素間の行・列の幅指定しています。

Properties

主要そうなプロパティを抜粋してご紹介( *˙ω˙*)و グッ!

プロパティ名 効果
child: Widget, ここに配置したWidgetをWrapします
direction: Axis.XXX, 要素の並びを縦 or 横に指定できます。
Axis.vertical, = 縦向き
Axis.horizontal, = 横向き
spacing: double, 要素間の間隔を指定できます。
runSpacing: double, 要素間の間隔を指定できます。
Axis.vertical,の場合、列(横幅)のスペースを指定
Axis.horizontal,の場合、行(縦幅)のスペースを指定

もっと詳しく知りたい方は 公式ドキュメントをご参考に!

あとがき

お疲れ様でした!
これで幅が足りずにエラーが起きることはなくなりそうですね(∩’-‘⊂)シュッ

次回は AnimatedContainerの紹介です!
それでは次の記事で会いましょう!

Flutterカテゴリの最新記事