2022/04/23 WTM IWD 2022 「集え Flutter レディース」セッション資料 2022/02/24 に Flutter packages に移管された go_router パッケージが利用している基盤とこれからについての考察です。 「集え Flutter レディース」は、 テック界に女性エンジニアが増えるよう応援する、Women Techmakers プログラムによる、 国際女性デー月間（International Women's Day Month）の女性エンジニアによる Flutter開発技術オンライン発表会です。 【IWD2022】集え Flutter レディース https://gdgkyoto.connpass.com/event/240258/ https://gdg.community.dev/events/details/google-gdg-kyoto-presents-wtm-international-womens-day-2022/

1. go_router が隠してくれるもの
Navigatorと Routerと これから
1
robo
【IWD2022】集え Flutter レディース

2. 自己紹介
名前
robo （兼高理恵）
好きなもの
モバイル端末
おしごと
アプリの要件定義と仕様策定、設計から実装＆改修まで
所属
GDG Kyoto (Organizer) WTM Kyoto (Ambassador)
Flutter Osaka (staff) FlutterKaigi (staff)
2

3. はじめに
go_routerは、v3.0.2 から Flutter package に移管され
Flutterチームがメンテナンスするようになりました。
gorouter.dev の公式ドキュメントも、
これから docs.flutter.dev に移動するそうです。
● gorouter.dev
https://gorouter.dev/
● docs.flutter.dev
https://docs.flutter.dev/
3
Chris Sells さんの移管報告ツイート (2022/02/25)
https://twitter.com/csells/status/1496983180791873538

4. 公式ドキュメントの移動は、まだのようですが、
リポジトリは Flutter package に移管済です。
バージョンも移管から 2ヶ月経過した、
現在(2022/04/20)では、3.0.7 まで進んでいます。
● go_router （pub.dev）
https://pub.dev/packages/go_router
● go_router changelog
https://pub.dev/packages/go_router/changelog
● go_router repository
https://github.com/flutter/packages/tree/main/packages/go_router
● go_router issue
https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+go_router%22 4

5. 5
Chris Sells さんの go_router リポジトリ (現在アーカイブとなり read-only になっています)
https://github.com/csells/go_router
Chris Sells さんの
go_router リポジトリは、
アーカイブされました。
アーカイブに伴い、
Contributor toshi-kuji さん
による邦訳ドキュメントも
read-only になっています。

6. おわび
セッションでは、go_router の実装法について話しません。
ナビゲーションとルーティングの基本の確認となっています。
go_router の概要や使い方や具体例については、
Flutter package に移管されてからまだ日が浅いため、
邦訳された公式ドキュメントを一読するのが良いと思います。
注意）一部の移管前リソースを参照するリンクは、404になっています。
6

7. 7
go_routerとは

8. go_router パッケージが目指すもの
宣言的ルートを使用して、以下の複雑さを軽減させること＋α（意訳です）
● ディープリンクやダイナミックリンクの取り扱い
● そのほかのナビゲーション関連シナリオへの対応
● これらのプラットフォーム①
に依らない解決方法
● 願わくば、使いやすい開発体験を提供すること。
①
iOS、Android、モバイル、ウェブ、 デスクトップ
8
go_router
https://pub.dev/packages/go_router

9. go_router パッケージが提供するもの
公式ドキュメント日本語版の目次より
● 宣言的なルーティング（Routing）
○ 遷移経路のルート定義の説明 ⇒ GoRouter.routes への GoRoute ツリー構造の登録
● ナビゲーション
○ ページ間遷移の方法の説明 ⇒ GoRouter.go メソッドの使い方
● パラメータ
○ クエリパラメータ定義の説明 ⇒ GoRoute.builder state 引数の使い方
● サブルート
○ 遷移経路のサブツリー定義の説明 ⇒ GoRoute.routes への GoRoute ツリー構造の登録
9
go_router 公式ドキュメント日本語版の目次
https://zenn.dev/inari_sushio/scraps/01ef7604a4b934

10. go_router パッケージが提供するもの
● リダイレクト
○ ページリダイレクト方法の説明 ⇒ GoRouter.redirect への GoRoute差替先の登録
● 名前付きルート
○ パス特定識別名定義の説明 ⇒ GoRoute.name への パス識別名の登録
● ユーザー入力フォーム
○ ページ間データ授受方法の説明 ⇒ GoRoute は呼出先からの返値を受け取れないので、
呼出先で呼出元オブジェクトに値を入れてもらう。
● ネスト（入れ子）型ナビゲーション
○ アドレスバー対応の部分遷移の説明 ⇒ GoRoute.path と builder state を使った
同一ページパスのタブ別パラメータ定義
● サンプルコード集
○ go_router の具体的な使用方法のサンプル
10
これらは、
Navigator 2.0 の複雑さを隠してくれます。

11. Navigator 2.0 とは何か（Navigator と Router）
Navigation and routing では、
Flutterでは、ページ遷移の経路制御を行う、
命令型ルーティング (imperative routing mechanism) の Navigator ウィジェットと、
宣言型ルーティング (declarative routing mechanism) の Router ウィジェットがあることや
Navigator API は、簡単なページ遷移に役立ち、
Router API は、より複雑なページ遷移に役立つことと
そして、Router と宣言的ルーティングの学習資料として、
Learning Flutter’s new navigation and routing system が紹介されています。
11
Navigation and routing
https://docs.flutter.dev/development/ui/navigation

12. Navigator 2.0 とは何か（Navigator と Router）
Learning Flutter’s new navigation and routing system では、
新しくなった Navigator API と 新たに追加された Router API を使って、
ページ遷移の制御や、ルート (遷移経路) の解析をより細かくする方法が、
Navigator 2.0 だと説明されています。
Navigator 2.0 は、複数のページをプッシュまたはポップしたり、
現在のページの下にあるページを削除したりするこができますが、
既存の方法のまま Navigator API を使い続けることもできるとあります。
12
Learning Flutter’s new navigation and routing system
https://medium.com/flutter/learning-flutters-new-navigation-and-routing-system-7c9068155ade

13. Navigator 1.0 とは
Navigator 1.0 は、Navigator と Route を利用した旧来のページ遷移法です。
● Navigator
Route (起点) オブジェクトのスタックを管理するウィジェット
● Route
画面ウィジェットツリーのルート (起点) を表すウィジェット
一般的には、MaterialPageRoute が利用される。
● Route (起点) オブジェクトを Navigator.push で直接 生成するか、
MaterialApp.routes に名前付きの Builder を定義 (Named routes) するかして、
Navigator のスタックに push/pop で出し入れしてページ遷移を行います。
13

14. Navigator 1.0 とは
通常 Navigator は、アプリに１つ (MaterialApp にバインドされる) であり、
その Navigator オブジェクトに push/pop により、
Route をスタックに出し入れさせる命令型ルーティングを行います。
仕組みが単純で扱い易いのですが、
画面を任意で積み上げ取り去りできるので、
現在の画面がどのような経路で積み上げられ
た(遷移してきた)のかを知るには、独自の履歴
管理が必要です。
14

15. Navigator 2.0 とは
Navigator 2.0 は、Page、Router、RouteInformationParser、RouterDelegate、
BackButtonDispatcher を利用した新しいページ遷移と経路制御管理法です。
● Page
Navigator の遷移履歴スタック(pages) で管理される不変のオブジェクト。
● Router
Navigator が遷移を表現できるよう Page の遷移履歴スタックを構成します。
Page の遷移履歴スタックは、基盤となるプラットフォームまたは
アプリの状態の変化に基づいて変化します。
15

16. Navigator 2.0 とは
● RouteInformationParser
RouteInformationProvider から取得した RouteInformation が、
どの遷移パスに対応するデータかを解析します。
● RouterDelegate
Router がアプリ固有のページ遷移挙動を行えるよう、
検出したアプリの状態変化に応じた Router への通知をおこないます。
そのために、RouteInformationParser とアプリの状態および、
Navigator が持つ Page の遷移履歴スタックの再構築を監視します。
● BackButtonDispatcher
戻るボタンの押下を RouterDelegate ⇒ Router に通知します。
16

17. Navigator 2.0 とは
17
【参考】Flutter2の新しい画面遷移「Navigator 2.0」を使ったページ遷移を理解しよう
https://codezine.jp/article/detail/14532
Page、Router、RouteInformationParser、
RouterDelegate、BackButtonDispatch
の相互作用例

18. go_router が隠していたもの
「go_router が提供するもの」で紹介した機能は、
前ページまでに登場した Navigator 2.0 を使うための要素 …
Navigator、遷移履歴スタック、遷移パス、Page、
Router、RouteInformationParser、RouteInformationProvider、
RouteInformation、RouterDelegate、BackButtonDispatcher を隠し、
GoRouter と GoRoute で機能を提供してくれていたようです。
18

19. Navigator 2.0 の背景を学ぶ
Flutter Design Documents には、
様々な仕様提案が公開されています。
その中には、Router API についての提案があります。
ドキュメントでは、Navigator 2.0 が必要になる
背景や解決案について述べられています。
Introduce a declarative API to set the history stack of
the Navigator and a new Router widget to configure
the Navigator based on app state and system events.
19
Router (PUBLICLY SHARED)
https://docs.google.com/document/d/1Q0jx0l4-xymph9O6zLaOY4d_f7YFpNWX_eGbzYxr9wY/edit
紹介のみ

20. 20
go_routerのこれから (予想)

21. go_router のこれから
go_router が、Flutter package に
移管されてから２ヶ月が経ち...
Flutter Design Documents に
go_router が、これから
どこに向かうのかを示唆する
仕様提案が今月追加されました。
go-router-improvements
21
GoRouter API improvements (PUBLICLY SHARED)
https://docs.google.com/document/d/1_mRXinbL_rb0mUt6DAFZ8kj0kh33ZjEMJuUq4PJgwj8/edit

22. go_router のこれから
ドキュメントでは、
● GoRouterは、
Router ウィジェットに基づいた簡略化された API を提供してくれますが
● 現在 GoRouter には、
Focus issues、Absolute paths、Shell UI、Redirection
という 課題がある ことと
● StackedRoute、NavigatorRoute、
ShellRoute +(preserveState パラメータ)、RouteState
という 新規 API が提案 されています。
22

23. Absolute paths 課題
GoRouter は、相対パスへのナビゲートをサポートしていません。
例えば、HomeScreen と Ascreen があるとして、
ページ遷移の構成が HomeScreen ⇒ Ascreen とするので、
GoRouteの routes を使ってパスの入れ子構造①
を作れても、
go('/home') の次は、go(’/home/a’) のように絶対パスの使用を強制します。
① GoRouter(routes: [ GoRoute(path: '/home', routes: [ GoRoute(path: 'a' routes: []), ), ),
23

24. Focus issues 課題
GoRouteの外側に Scafold を生成させるとフォーカスに課題があります。
GoRouter コンストラクタ引数の navigatorBuilder で、
GoRoute の周囲(外郭) に UI を構築させることができますが、
Scafold を構築させるとフォーカスの問題が発生する可能性がある課題
24

25. Shell 課題
ここでの Shell は、子コンポーネントの周りに描画された UI を表す用語です。
Shell とは、子コンポーネントの周りに描画された UI のことですが、
遷移描画ウィジェットにとって、自分の外側(外郭) に親UIが存在するため、
ナビゲーションで全画面再構築はしていないが、
ページ遷移なので、
アドレスバーなどでパスを変える必要が発生する課題です。
一般的な対象例として、
BottomNavigationBar、AdaptiveNavigationScaffold、
または TabBar が挙げられます。
25

26. Redirection 課題
右のサンプルコードの内容は、
GoRouter に '/'で HomeScreen を定義し、
'/a'で Ascreen、'/b'で Bscreen を定義しています。
ここで Ascreen に HomeScreen へのリダイレクトを付け、
go('/a') を実行すると HomeScreen が表示されますが、
履歴バックさせても Ascreen には戻らないそうです。
これは、GoRouter のリダイレクト処理が、
最終的な経路パスの Route (ページ) のみ構築するからです。
この最適化により 端折られた途中経過のページ遷移は、
履歴に残るはずもないので、バックしても表示されません。
26
late final GoRouter _router = GoRouter(
routes: <GoRoute>[
GoRoute(
path: '/',
builder: (context, state) => HomeScreen(),
routes: <GoRoute>[
GoRoute(
path: 'a',
builder: (context, state) => AScreen(),
redirect: (_) {
return '/';
},
routes: <GoRoute>[
GoRoute(
path: 'b',
builder: (context, state) => BScreen(),
),
],
),
],
),
],
redirect: (GoRouterState state) {
return null;
},
);
Issue #101183 GoRouterのリダイレクト動作に関するいくつかの問題
https://github.com/flutter/flutter/issues/101183

27. 新規 API 提案
● StackedRoute
GoRoute を StackedRoute に改名し、
パスに一致するサブルートが
親の上にスタックされていることを明示するようにします。
● NavigatorRoute
描画効率化のため 内部 Navigator を生成して、
パスに一致するサブルートを表示させる GoRoute 拡張版ウィジェットです。
27

28. 新規 API 提案
● ShellRoute
子Route の外郭となる 親Route に必要な対応として、
コンストラクタ引数 builder に追加の子パラメーターを提供する、
GoRoute 拡張版ウィジェットです。
○ 追加されたパラメータは、
対応する 子Route の builder を呼び出せるようにします。
○ 一致する 子Route がなかった場合、
このウィジェットは 幅と高さがゼロの SizedBox とします。
28

29. 新規 API 提案
● ShellRoute preserveState パラメータ
ShellRoute に、サブルートの Widget を保持させるパラメータです。
Offstageウィジェットを使用してサブルートのウィジェットを保持します。
以前にアクティブだった Route オブジェクトも保存させます。
● RouteState
相対ルートをサポートするためのオブジェクトです。
GoRouter に
「GoRoute builder を介して構築されたすべてのウィジェットに
RouteState オブジェクトを提供する」ようにさせます。
29

30. go_router のこれから
go_router パッケージは、
Router ウィジェットに基づいた簡略化された API を提供して、
複雑さを隠蔽してくれています。
新規 API は、提案なので実現するか否かは現時点で不明です。
ですが、新規APIを必要とする課題 は存在しています。
go_router が 隠してくれない課題 があることを認識し、
課題を解決する一助になれたらと願います。
30

31. 31
ご清聴、
ありがとうございました。
情報修正があれば更新します
最新版スライドは こちらから