Flutter 〜go_routerによる画面遷移の基本〜

go_routeを使って画面A、画面B、画面Cの3画面間でボタンクリックによって画面遷移を行う。
やることは以下の通り。

1.pubspec.yamlにgo_routerを追記
2.pushで指定した画面へ遷移
3.popで前画面へ遷移
4.goで指定した画面へ遷移

各画面は以下の遷移が可能。

・画面A => 画面B

・画面B => 画面A
・画面B => 画面C

・画面C => 画面B
・画面C => 画面A

pubspec.yamlにgo_routerを追記。
※インデントに注意！

dependencies:
  go_router:
  flutter:
    sdk: flutter

main.dart
遷移時に使用するPATHを定義する。
画面A→"/a"
画面B→"/b"
画面C→"/c"

// 必要なパッケージのインポート
import 'package:flutter/material.dart';
// 各ページコンポーネントのインポート
import 'package:rubydogs/page_a.dart';
import 'package:rubydogs/page_b.dart';
import 'package:rubydogs/page_c.dart';
// ナビゲーション用のパッケージ go_router のインポート
import 'package:go_router/go_router.dart';

// メイン関数：アプリケーションの起点
main() {
  // App クラスのインスタンスを作成
  final app = App();
  // runApp 関数に App インスタンスを渡してアプリケーションを起動
  runApp(app);
}

// アプリ全体を構築する App クラス
class App extends StatelessWidget {
  App({super.key});

  // ルーターの設定：ページのパスとそれに対応するウィジェットを定義
  final router = GoRouter(
    // アプリ起動時に表示される初期ページのパス
    initialLocation: '/a',
    // パスに対応するページウィジェットを定義するルートのリスト
    routes: [
      GoRoute(
        // パス '/a' に対応する PageA をビルド
        path: '/a',
        builder: (context, state) => const PageA(),
      ),
      GoRoute(
        // パス '/b' に対応する PageB をビルド
        path: '/b',
        builder: (context, state) => const PageB(),
      ),
      GoRoute(
        // パス '/c' に対応する PageC をビルド
        path: '/c',
        builder: (context, state) => const PageC(),
      ),
    ],
  );

  // ウィジェットをビルドするメソッド
  @override
  Widget build(BuildContext context) {
    // MaterialApp.router を使用して、ナビゲーションとルーティングを管理
    return MaterialApp.router(
      // ルーターからの情報を元にアプリケーションのルーティングを行う
      routeInformationProvider: router.routeInformationProvider,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );
  }
}

画面A
pushを使って/bに遷移

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

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

  //画面遷移用の関数
  push(BuildContext context) {
    context.push('/b');
  }

  @override
  Widget build(BuildContext context) {
    final appBar = AppBar(
      backgroundColor: Colors.red,
      title: const Text('画面A'),
    );

    //進むボタン
    final pushButton = ElevatedButton(
        onPressed: () => push(context),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
        child: const Text(
          'B画面へpush',
          style: TextStyle(color: Colors.white),
        ));
    return Scaffold(
        appBar: appBar,
        body: Center(
            child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            pushButton,
          ],
        )));
  }
}

画面B
pushを使って/cに遷移。popを使って前画面の/aに遷移。

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

class PageB extends StatelessWidget {
  const PageB({super.key});
  //画面遷移用の関数
  push(BuildContext context) {
    context.push('/c');
  }

  pop(BuildContext context) {
    context.pop();
  }

  @override
  Widget build(BuildContext context) {
    final appBar = AppBar(
      backgroundColor: Colors.blue,
      title: const Text('画面B'),
    );
    //進むボタン
    final pushButton = ElevatedButton(
        onPressed: () => push(context),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.yellow),
        child: const Text('C画面へpush', style: TextStyle(color: Colors.white)));

    //戻るボタン
    final popButton = ElevatedButton(
        onPressed: () => pop(context),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
        child: const Text('A画面へpop', style: TextStyle(color: Colors.white)));

    return Scaffold(
        appBar: appBar,
        body: Center(
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [popButton, pushButton],
            ),
          ),
        ));
  }
}

画面C
goを使って/aに遷移。popを使って前画面の/bに遷移。

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

class PageC extends StatelessWidget {
  const PageC({super.key});
  //画面遷移用の関数
  pop(BuildContext context) {
    context.pop();
  }

  go(BuildContext context) {
    context.go('/a');
  }

  @override
  Widget build(BuildContext context) {
    final appBar = AppBar(
      backgroundColor: Colors.yellow,
      title: const Text('画面C'),
    );
    //戻るボタン
    final popButton = ElevatedButton(
        onPressed: () => pop(context),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
        child: const Text('B画面へpop', style: TextStyle(color: Colors.white)));

    final goButton = ElevatedButton(
        onPressed: () => pop(context),
        style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
        child: const Text('A画面へgo', style: TextStyle(color: Colors.white)));

    return Scaffold(
        appBar: appBar,
        body: Center(
          child: Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [popButton, goButton],
            ),
          ),
        ));
  }
}