Flutter開発 導入メモ ~画面遷移~

ルーティング

• go_router: ルーティングのライブラリ
• go_router_builder: go_router をタイプセーフに扱うライブラリ

package

go_router | Flutter package

A declarative router for Flutter based on Navigation 2 supporting deep linking, data-driven routes and more

pub.dev

flutter pub add go_router

利用方法

1. ルーティングを記載する。

   final GoRouter _router = GoRouter(
   routes: <RouteBase>[  // ここに配列形式でルーティングを記載する
   GoRoute(
     path: '/',　　// REST API の要領で、パスを定義
     builder: (BuildContext context, GoRouterState state) {
       return const MyHomePage(  // 遷移先のウィジェットを指定する。
         title: 'title',
       );
     },
   ),
   ],
   );

2. MaterialAppのルーティング情報を、go_routerに紐づける。

   return MaterialApp.router(
     ....,
     routeInformationParser: _router.routeInformationParser,
     routerDelegate: _router.routerDelegate,
   );

   ポイント

   • MaterialApp() を、MaterialApp.route() に変更する。※ home のコンストラクタ引数が使えなくなるので削除する。
   • routeInformationParser と、routerDelegate に、GoRouterのものを割り当てる。

このようにすると、homeを指定しなくても、GoRouterの初期ルートである("/")に割り当てたウィジェットに遷移する。

遷移方法

• context.go(‘/)
• context.push(‘/)
  など。

go_router_builder

go_router_builder | Dart package

A builder that supports generated strongly-typed route helpers for package:go_router

pub.dev

導入

flutter pub add --dev go_router_builder

利用方法

1. go_router で作成したGoRouterに下記のようなルート情報を定義する。

   @TypedGoRoute<HomePageRoute>(
   path: '/',
   )
   class HomePageRoute extends GoRouteData {
   const HomePageRoute();
   
   @override
   Widget build(BuildContext context, GoRouterState state) => const MyHomePage();
   }

2. 自動生成するクラスを定義する。
   ルート情報を記載したファイルの上部に追記。

   part 'router.g.dart';

3. 自動生成コマンドを実行する

   lutter pub run build_runner build

4. ルート情報を書き換える。
   手順2で記載したrouter.g.dartが作成されていることを確認する。
   ルーティングを下記のように変更する。

   final GoRouter router = GoRouter(
   routes: $appRoutes,
   );

   $appRouter は、router.g.dartに定義されている変数。
   以降、手順1でルート情報を更新したら、手順3を実施する。

遷移方法

• HomePageRoute().push(context);

go_router 単独に比べて、遷移先が分かりやすくなっている。

以上