FlutterおけるGoRouterで画面遷移時に値を渡す方法

Flutter

エキサイト株式会社でモバイルアプリ開発に携わっている奥田です。 今回はGoRouterを使用する際に画面遷移時に値を渡す実装方法について記述します。

GoRouterの紹介

Navigator 2.0におけるFlutterのRoutingライブラリです。

pub.dev

画面定義

class App extends StatelessWidget {
  App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationProvider: _router.routeInformationProvider,
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
    );
  }

  final GoRouter _router = GoRouter(
    routes: <GoRoute>[
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) {
          return const UserScreen();
        },
      ),
      GoRoute(
        path: '/detail/:user_name/:user_id',
        builder: (BuildContext context, GoRouterState state) {
          final userName = state.params['user_name'];
          final userId = state.params['user_id'];

          return UserDetailScreen(
            userName: userName!,
            userId: int.parse(userId!),
          );
        },
      ),
    ],
  );
}
  • 初期画面の設定ではPathを/に指定することで実現できます。
  • 画面遷移時に値を受け渡す際にはPathを:user_nameに指定することでstate.params['user_name']で対象と一致する値を取り出すことができます。
  • Pathから取得した値はString型になっているのでint型で使用したい場合はint.parse(userId!)のように型を変換してあげる必要があります。

遷移実装

onTap: () => GoRouter.of(context).push('/detail/$userName/$userId'),
  • クリックイベントが発火したことをトリガーにする場合は上記の書き方になります。
  • 変数に定義したuserName、userIdをPathに指定し、画面遷移時に受け取るように実装しています。

参考になれば幸いです。