【Flutter】Routemasterで画面遷移

Routemasterとは

Routemasterは、Flutterアプリケーションのための使いやすいルーターで、Navigator 2.0の上に構築されています。
URLベースのルーティング、タブやネストされたルートのシンプルなナビゲーションを提供します。

• URLからページへのシンプルな宣言的マッピング
• 使いやすいAPI：Routemaster.of(context).push('/page') のように使用
• タブのネストされたナビゲーションのサポート
• ログインユーザー用、ログアウトユーザー用など、複数のルートマップ
• ルート変更を簡単に監視できるオブザーバー
• 250以上の単体テスト、ウィジェットテスト、統合テストでカバー

routemaster | Flutter package

Easy-to-use Navigator 2.0 router for web, mobile and desktop. URL-based routing, simple navigation of tabs and nested ro...

pub.dev

使い方

インストール

Routemasterをプロジェクトに追加するには、pubspec.yamlに以下の依存関係を追加します：

dependencies:
  flutter:
    sdk: flutter
  routemaster: ^1.0.1

基本的なセットアップ

Routemasterを使って基本的なルーティングを設定します。以下はタブとプッシュルートを備えたアプリの例です：

import 'package:flutter/material.dart';
import 'package:routemaster/routemaster.dart';

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

void main() {
  runApp(
      MaterialApp.router(
        routerDelegate: RoutemasterDelegate(routesBuilder: (context) => routes),
        routeInformationParser: RoutemasterParser(),
      ),
  );
}

ナビゲーションの使用例

ページ間のナビゲーションは以下のように行います：

Routemaster.of(context).push('/feed/profile/1');

タブの設定

タブのナビゲーションを設定するためには、以下のようにRouteMapを定義します：

final routes = RouteMap(
  routes: {
    '/': (_) => CupertinoTabPage(
          child: HomePage(),
          paths: ['/feed', '/settings'],
        ),
    '/feed': (_) => MaterialPage(child: FeedPage()),
    '/settings': (_) => MaterialPage(child: SettingsPage()),
  },
);

パスパラメータとクエリパラメータ

パスパラメータとクエリパラメータを使う方法は以下の通りです：

// パスパラメータの例
RouteMap(routes: {
  '/products/:id': (route) => MaterialPage(
        child: ProductPage(id: route.pathParameters['id']),
      ),
  '/products/myPage': (route) => MaterialPage(MyPage()),
})

// クエリパラメータの例
RouteMap(routes: {
  '/search': (route) => MaterialPage(
        child: SearchPage(query: route.queryParameters['query']),
      ),
})

オブザーバーの使用

ナビゲーションイベントを監視するために、RoutemasterObserverを使用します：

class MyObserver extends RoutemasterObserver {
  @override
  void didPop(Route route, Route? previousRoute) {
    print('Popped a route');
  }

  @override
  void didChangeRoute(RouteData routeData, Page page) {
    print('New route: ${routeData.path}');
  }
}

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