📝
【Flutter開発】 導入メモ ~画面遷移~
ルーティング
- go_router: ルーティングのライブラリ
- go_router_builder: go_router をタイプセーフに扱うライブラリ
package
https://pub.dev/packages/go_router
flutter pub add go_router
利用方法
-
ルーティングを記載する。
final GoRouter _router = GoRouter( routes: <RouteBase>[ // ここに配列形式でルーティングを記載する GoRoute( path: '/', // REST API の要領で、パスを定義 builder: (BuildContext context, GoRouterState state) { return const MyHomePage( // 遷移先のウィジェットを指定する。 title: 'title', ); }, ), ], );
-
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
利用方法
-
go_router で作成したGoRouterに下記のようなルート情報を定義する。
@TypedGoRoute<HomePageRoute>( path: '/', ) class HomePageRoute extends GoRouteData { const HomePageRoute(); @override Widget build(BuildContext context, GoRouterState state) => const MyHomePage(); }
-
自動生成するクラスを定義する。 ルート情報を記載したファイルの上部に追記。
part 'router.g.dart';
-
自動生成コマンドを実行する
lutter pub run build_runner build
-
ルート情報を書き換える。 手順2で記載した
router.g.dart
が作成されていることを確認する。 ルーティングを下記のように変更する。final GoRouter router = GoRouter( routes: $appRoutes, );
$appRouter は、
router.g.dart
に定義されている変数。 以降、手順1でルート情報を更新したら、手順3を実施する。
遷移方法
- HomePageRoute().push(context);
go_router 単独に比べて、遷移先が分かりやすくなっている。
Discussion