【Flutter】Navigator 2.0 ラッパーライブラリ routemaster の使い方入門

2021年5月29日 17:27

Navigator 2.0 難しいですよね。わかります。。
最近出た routemaster というラッパーライブラリ使ってみたところ、とても使いやすいかったので、その概要と使い方を共有したいと思います。
もちろん null-safe なライブラリです。

routemaster の特徴

routemaster は主な特徴を6個あげています。これらは使ってみた印象とあっていました。
✅ URL とページのマッピングをシンプルに定義できる
✅ 使いやすいシンプルな API （例：routemaster.push('/page')
✅ ネストされたタブにも、非常に簡単なやり方で対応できる
✅ 複数のルートマッピングを定義できる（例えばログインユーザーと他を分けたり
✅ ルートの変更を簡単に検知できる
✅ 160個以上の Unit/Widget/Integrationテストで動作検証済み

インストール

pubspec に以下を追加します。2021/05/29 現在は 0.9.0 が最新バージョンです。

routemaster: ^0.9.0

ルートを定義

まずはパスとルートのマッピングを定義します。URLパラメータの設定や、タブ対応を非常に簡単に定義できてていいですよね。

final routeMap = RouteMap(
 routes: {
   '/': (route) => TabPage(
         child: HomePage(),
         paths: ['/feed', '/settings'],
       ),
   '/feed': (route) => MaterialPage(child: FeedPage()),
    '/feed/profile/:id': (info) => MaterialPage(
     child: ProfilePage(id: info.pathParameters['id'])
   ),
   '/settings': (route) => MaterialPage(child: SettingsPage()),
 },
);

MaterialApp の routerDelegate に設定する

ここに関しては、遷移の操作時に context を使わない方法について記します。RoutemasterDelegate のインスタンスを変数に入れておいて、それを MaterialApp の routerDelegate に設定します。

final routemaster = RoutemasterDelegate(
 routesBuilder: (context) => routeMap,
);

MaterialApp.router(
 routerDelegate: routemaster,
 routeInformationParser: RoutemasterParser(),
)

遷移させてみる

さて、ここまでくればあとは簡単。実際に遷移させてみましょう。

/// 特定のパスに遷移する 
routemaster.push('/settings');

/// 前のパスに戻る
routemaster.pop();

/// パスを書き換える
routemaster.replace('/feed/123');

ルートの変更を監視する

これも簡単です。RoutemasterObserverを継承したクラスを作り、それを RoutemasterDelegate に渡してあげればOK。

class MyObserver extends RoutemasterObserver {
  // RoutemasterObserver extends NavigatorObserver and
  // receives all nested Navigator events
 @override
 void didPop(Route route, Route? previousRoute) {
   print('Popped a route');
 }

	// Routemaster-specific observer method
 @override
 void didChangeRoute(RouteData routeData, Page page) {
   print('New route: ${routeData.path}');
 }
}

MaterialApp.router(
 routerDelegate: RoutemasterDelegate(
   observers: [MyObserver()],
   routesBuilder: (_) => routeMap,
 ),
 routeInformationParser: RoutemasterParser(),
);

現在のルートを知る

routemaster を使えば、現在どこにユーザーがいるかも簡単に知ることができます。これを知るためだけに過去に苦労した記憶が蘇ってきます。

/// 現在のパスにアクセスする
routemaster.currentConfiguration?.path

特定の条件の時にのみアクセスを許可する

ユーザーが画面にアクセスする時に特定の条件の時のみ許可したり、他の画面にリダイレクトする、といった細かい制御もすることができます。
こういった細かい制御については、こちらの公式のサンプルが参考になります：
https://github.com/tomgilder/routemaster/tree/main/example/book_store
また、こちらの作者の人のツイッタースレッドも参考になりました。

Here’s how you guard a page - just return NotFound() if it doesn’t exist, or Redirect() to go to another page pic.twitter.com/WEWJbDK13E
— Tom Gilder (@tomgilder) May 27, 2021

まとめ

routemaster はいかがだったでしょうか。個人的には、直感的かつ多機能で非常に使いやすい素晴らしいライブラリという印象を持ちました。
もっと高度な、Deep linking (Dynamic linking)などのやり方を知りたいという方は、公式のサンプルがあるのでそちらを参考にすると良いかと思います。