【Flutter】go_routerで値を渡す

はじめに

go_routerで値を渡す方法を紹介します

準備

pubspec.yamlにgo_routerを追加します

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
   go_router: ^5.2.2

やり方

まず、ルーティングを設定します。
今回は、/を設定してあるMainPageから、SubPageに値を渡します。

page_router.dart

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const MainPage();
      },
    ),
    GoRoute(
      path: '/sub',
      builder: (BuildContext context, GoRouterState state) {
        return SubPage('渡したい値');
      },
    ),
  ],
);

main.dart

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
    );
  }
}

---

MainPageとSubPageを作ります。
SubPageには引数を渡せるようにしておきます。

context.go('/sub',extra: '渡す値');のextraに渡したい値を設定することで、SubPageに値を渡すことができます。

main_page.dart

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ElevatedButton(onPressed: () {
         context.go('/sub',extra: '渡す値'); 
      }, child: Text('subページへ')),
    );
  }
}

SubPageではMainPageから受け取った値をTextで表示させています。

sub_page.dart

class SubPage extends StatelessWidget {
  SubPage(this.text, {super.key});

  String text;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Text(text),
    );
  }
}

extraに渡した値は、GorouteのbuilderのGoRouterStateからstate.extraとすることで、取り出すことができます。
ルーティングを修正します。

page_router.dart

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const MainPage();
      },
    ),
    GoRoute(
      path: '/sub',
      builder: (BuildContext context, GoRouterState state) {
        return SubPage(state.extra as String);//修正箇所
      },
    ),
  ],
);