【スクラップ】Flutterの勉強

アプリ作りで学んだFlutterについての知見を殴り書きする。

基本

重要な用語がWidget, Route, スタック。

Widget

• 画面の構成要素（UIパーツ）。
• 木構造（Widgetツリー）を作って画面を表現する。
• ボタンやテキストのような小さなものから、Scaffoldのように画面全体を構成する大きなものまで含まれる。

Route

• 「1つの画面」に相当する概念。
• 内部に「その画面を描画するためのWidgetツリー」を持っている。
• 例：MaterialPageRoute(builder: (context) => MemoListPage())

Navigator（スタック）

• Routeを管理する仕組み。
• スタック構造になっており、
  • push → 新しいRoute（画面）を追加
  • pop → いまのRoute（画面）を削除
• スタックの一番上のRouteに対応するWidgetツリーが「表示中の画面」となる。

基本構成

MaterialApp と Navigator

• MaterialApp はアプリ全体のルートウィジェット
• Navigator は MaterialApp 内に配置される画面遷移の管理者
• 基本的に アプリごとに1つだけ（必要に応じてサブ Navigator を作る場合もある）

Route と Navigator の関係

• Route = 1つの画面
• すべての Route は 同じ Navigator のスタックに積まれる
• だから Route 内の context から Navigator.of(context) を呼べば、どの Route からでも同じ Navigator にアクセス可能

イメージ

MaterialApp
 └─ Navigator
      ├─ Route(HomePage)
      ├─ Route(DetailPage)
      └─ Route(SettingsPage)

• HomePage から Navigator.of(context) → Navigator に到達
• DetailPage から Navigator.of(context) → 同じ Navigator に到達
• Navigator のスタック上で push/pop すれば、表示画面が切り替わる

BuildContext

アプリ全体を表すウィジェットツリー内での自分の位置を指し示すハンドル。

ツリーの中で自分よりも親の情報を参照することができ、子の方向にはwidgetを作成することができる。

navigationKey

通常以下のような形でcontextをもとに画面遷移をする。

Navigator.of(context).push(
  MaterialPageRoute(builder: (_) => NextPage()),
);