📝

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

2023/02/21に公開

ルーティング

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

GitHubで編集を提案

Discussion