Everything is a Widget｜いちから始めるFlutterモバイルアプリ開発

Widget とツリー構造

Flutterでアプリを作るときに、超大事なのがWidget（ウィジェット）！

Widgetとは、FlutterにおいてUIを構成する各要素のことです。

ボタンやテキスト、画像みたいな画面に出てくるモノはもちろん、レイアウトの配置やスクロール、アニメーションの効果まで、すべて「Widget」でできています！

そして、このWidgetたちはツリー構造になってつながっています。

どういうことかというと、Widgetは他のWidgetを中に入れられる仕組みになっていて、

たとえば、「画面全体」というWidgetの中に、「横に並べる」Widgetを入れて、その中に「縦に並べる」Widgetを入れて、その中に「テキスト」と「ボタン」のWidgetを並べて…という風に、積み重ねるようにUIを組み立てます！

サンプルアプリの以下の画面を例に見てみよう！

この UI を構成する Widget ツリーの定義は以下のようになっています。

こちらの記述ではScaffold Widget の子要素としてappBar、body、floatingActionButtonのフィールドにそれぞれ Widget ツリーが指定されています。

appBarにはAppBar→Textからなる widget ツリー、

bodyにはCenter→Column→ ２つのTextからなる Widget ツリー、

floatingActionButtonにはFloatingActionButton→Iconからなる Widget ツリーが指定されています。

これを図式化すると以下のようツリー構造になります。