Flutter go_routerの使い方｜ルート定義と画面遷移の基本

go_routerはFlutterでURLベースの画面遷移を扱いやすくするルーティングパッケージです。小規模アプリではNavigatorでも十分ですが、Web対応やディープリンクを考えるなら早めに候補になります。

この記事の結論

最初はGoRouterでルートを定義し、MaterialApp.routerに渡し、context.goやcontext.pushで遷移する流れを覚えます。

パッケージを追加する

flutter pub add go_router

ルートを定義する

final router = GoRouter(
  routes: [
    GoRoute(
      path: "/",
      builder: (context, state) => const HomePage(),
    ),
    GoRoute(
      path: "/detail",
      builder: (context, state) => const DetailPage(),
    ),
  ],
);

MaterialApp.routerに渡す

MaterialApp.router(
  routerConfig: router,
)

画面遷移する

context.go("/detail");
context.push("/detail");

goは現在の場所を置き換える感覚、pushは戻る履歴を積む感覚で使い分けます。

実装後に確認すること

• ルートパスが重複していないか
• MaterialAppではなくMaterialApp.routerを使っているか
• 戻る必要がある遷移でpushを使っているか
• Webやディープリンクを想定したURL設計か

よくあるつまずき

• Navigatorとgo_routerを混ぜて混乱する
• context.goとcontext.pushを意図なく使う
• 認証リダイレクトを最初から複雑にしすぎる
• パス文字列を各所に散らばらせる

次に読む記事

• Flutterの画面遷移｜Navigator.pushとpopの基本 — Flutterの画面遷移を初心者向けに解説します。Navigator.push、MaterialPageRoute、pop、値を渡す考え方、go_routerとの違いを整理します。
• Flutter状態管理とは？setState・Provider・Riverpodの違いを初心者向けに解説 — Flutterの状態管理を初心者向けに解説します。状態とは何か、setState、Provider、Riverpodをどの順番で学ぶかを整理します。
• Flutter Riverpodの使い方｜Providerで状態を読み書きする基本 — FlutterでRiverpodを使う基本を解説します。flutter_riverpodの追加、ProviderScope、Provider、ConsumerWidget、ref.watchの流れを整理します。

まとめ

go_routerはFlutterの画面遷移をURLベースで整理できるパッケージです。まずは2画面のルート定義から始め、認証やネストは後から追加しましょう。