Widgetの実装

Widgetツリーの構造

Widgetツリーとは、Widgetが親子関係で並んでいる構造のことである。
下の画像は、親Widgetの下に子Widgetがどのように配置されているかを示している。

Widgetの実装例

Scaffold(
  appBar: AppBar(
    backgroundColor: Theme.of(context).colorScheme.inversePrimary,
    title: Text(widget.title),
  ),
  body: Center(
    //省略
  ),
  flotingActionButton: FloatingActionButton(
    //省略
  ),
);
  • Scaffold： アプリ全体のレイアウトを提供する親Widget。Scaffoldは、アプリの基本的な画面のレイアウトを構成してくれる機能を持つ。
    • appBar： アプリの上部に表示されるアプリバー（AppBar）を作る。AppBarは通常、タイトルやアクションボタンが入る。
      • backgroundColor： アプリバーの背景色を設定する。
      • title： アプリバーに表示するタイトルを設定する。
  • body： アプリのメインコンテンツを配置する場所。ここでは、Centerウィジェットが設定されている。
    • Center： 子Widgetを中央に配置するためのWidget。Scaffoldのbodyパラメータに設定されている。
  • floatingActionButton： 画面の右下に表示される浮動アクションボタン（FAB）を定義する。
    • FloatingActionButton： 省略されているが、通常はアイコンやアクションを定義するために使用される。

このように、Scaffoldを使ってアプリの基本的なレイアウトを定義し、AppBar、Center、FloatingActionButtonなどのWidgetを組み合わせてアプリの構造を作成していく。

inserted by FC2 system