go_routerの覚書（ほぼコピペ）

2025年3月20日

以下はまだ動作未検証のコピペです。動作検証後に清書します。
https://zenn.dev/channel/articles/af4ffd813b1424　　（オリジナルサイト）

go_routerとは

画面遷移パッケージ。
Navigator → Navigator2.0になった。だがNavigation2.0は複雑で扱いにくい。それを使いやすくしたのがgo_router。
go_routerの機能を一言で説明すると「パスと画面の組み合わせを決める」。

go_routerを使用するための下準備

下準備手順

パッケージのインストール

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
   go_router: ^10.0.0

routerを定義
- パスと画面の組み合わせを定義
- builderとpageBuilderの違い
  - 画面遷移時にアニメーションさせたい場合は、builderをpageBuilderに変える。

router.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

final goRouter = GoRouter(
  // アプリが起動した時
  initialLocation: '/',
  // パスと画面の組み合わせ
  routes: [
    GoRoute(
      path: '/',
      name: 'initial',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: state.pageKey,
          child: const MyHomePage(),
        );
      },
    ),
    // ex) アカウント画面
    GoRoute(
      path: '/account',
      name: 'account',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: state.pageKey,
          child: const AccountScreen(),
        );
      },
    ),
    // ex) アカウント詳細画面
    GoRoute(
      path: '/account-detail',
      name: 'accountDetail',
      pageBuilder: (context, state) {
        return MaterialPage(
          key: state.pageKey,
          child: AccountDetailScreen(state.extra as User),
        );
      },
    ),
  ],
  // 遷移ページがないなどのエラーが発生した時に、このページに行く
  errorPageBuilder: (context, state) => MaterialPage(
    key: state.pageKey,
    child: Scaffold(
      body: Center(
        child: Text(state.error.toString()),
      ),
    ),
  ),
);

MaterialAppを以下のように書き換え

main.dart

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

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

      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      // home: const AccoutScreen(),
    );
  }
}

下準備は以上です。

使用例

通常の画面遷移

main.dart

ElevatedButton(
  child: Text("アカウント詳細画面へ遷移"),
  onPressed: () {
    context.push('/account-detail');
  },
),

前の画面へ戻る

accout_detail_screen.dart

ElevatedButton(
  child: Text("アカウント画面へ戻る"),
  onPressed: () {
    context.pop();
  },
),

routerのnameプロパティに定義したものを引数にして画面遷移する

main.dart

ElevatedButton(
  child: Text("nameプロパティを引数にしてアカウント詳細画面へ遷移"),
  onPressed: () {
    context.goNamed('accountDetail');
  },
),

画面遷移

context.push('/path-name')で次の画面へ。
context.pop()で戻る。
context.go('/path-name')で画面の順番を飛び越えて、一気に別の画面に行ける。
- ex) 3つ前の画面に戻りたい時などに使用。
- context.go()を使用した場合、左上の戻るボタンは表示されない。
context.goNamed('name')を使用する場合はnameで定義したルーティングの名前を引数に指定する。

次ページへの値の渡し方

extra引数で次のページに値を渡すことができる。

main.dart

ListTile(
  onTap: () {
    context.push('/accout-detail', extra: userObject);
  },
);

router.dart

// アカウント詳細ページ
GoRoute(
  path: '/account-detail',
  name: 'accountDetail',
  pageBuilder: (context, state) {
    return MaterialPage(
      key: state.pageKey,
      child: AccountDetailScreen(state.extra as User),
    );
  },
),

参照

https://youtu.be/9lRpNOwHH4Y?si=zfAaCaqsRO35Z2MR