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

ルーティング

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

---

package

https://pub.dev/packages/go_router

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

https://pub.dev/packages/go_router_builder

導入

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 単独に比べて、遷移先が分かりやすくなっている。