【Flutter】Widget of the Week #2 Expanded

【Flutter】Widget of the Week #2 Expanded

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

Expandedってなに?

直訳すると「拡張」であり、
残りの空間を埋めてくれるウィジェット
です\_(・ω・`)ココ重要!

こんな感じに伸ばしたいウィジェットをExpandedでラップ(囲む)することで残りの隙間を埋めてくれます!

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

Flutter の知識を Expanded ウィジェットで広げましょう。Flutter の Expanded は、行と列の子へ送る制約を変更し、隙間を埋めるよう指示するものです。さあ、Expanded ウィジェットで子を囲んで、その子の成長を見守りましょう。

公式Youtubeより引用

 

Widget of the Week #2 Expanded

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

 

 

概要をなんとなく把握できたところで、
Widgetの有無の差を見ていきましょう(∩’-‘⊂)シュッ

Expanded Widgetなしの場合

Expanded Widgetありの場合
※真ん中の青いをExpanded(拡張)しています

Sample Code

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

構造としては真ん中の青いをExpandedでラップしています!

Point

Rawは横に整列してくれるWidgetで、
MainAxisAlignment.spaceEvenly,のプロパティで均等に配置しています。

主要なProperties

flex
これは拡張するWidgetの優先順位を指定するプロパティです\_(・ω・`)ココ重要!

Sample Code 2

プロパティを追加したコードです。
33,46行目にflexプロパティを追加しています。

公式の説明では「優先順位の指定」と記載がありますが、
「残りのスペースの比率」という考え方の方が個人的にはしっくりきてます(•_•)

あとがき

お疲れ様でした!
これでWidgetの隙間を埋める名人になれた気がしますね(∩’-‘⊂)シュッ

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

Flutterカテゴリの最新記事