【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より引用

 

Widget of the Week #3 Wrap

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

 

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

Wrap Widgetなしの場合

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

Wrap Widgetありの場合

Sample Code

Wrap Widgetありの完成形サンプルコードです!

構造としては4つの黄色い四角をWrapウィジェットで囲っています

主要なProperties

使えそうなプロパティを抜粋して紹介していきます( *˙ω˙*)و グッ!

Sample Code 2 – direction –

direction: Axis.vertical, 
これは要素の並びを縦に指定するプロパティです!
「direction: Axis.horizontal,」で横並びに指定することもできます!
※デフォルトが横向きなのでわざわざ指定する必要はありませんが(•_•)

27行目にプロパティを追加することで縦向きになりました!

Sample Code 3 – spacing –

spacing
これは要素間のスペース幅を指定するプロパティです!

Sample Code 2 にspacingを追加しますが、
39行目でコンテナ間にマージンを作成してしまっているので、
EdgeInsets.all(10.0), の値を0にした上で追加します。

Sample Code 4 – runSpacing –

runSpacing
これは要素間の行・列の幅指定するプロパティです!

spacingと何が違うかといいますと、
縦並び(direction: Axis.vertical,)の状態だと以下の通りになります。
・spacingを指定=行(縦幅)のスペースを指定
・runSpacingを指定=列(横幅)のスペースを指定

あとがき

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

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

Flutterカテゴリの最新記事