【Flutter】画面遷移の方法（go_router）
概要 パッケージ go_router を用いて画面遷移する方法を備忘録としてまとめます。ルビーdogさんの動画を参考にしています。 全体像 以下のような流れで画面遷移を作ることができます。 go_routerをインストールする 画面のクラスを定義する アプリ全体のクラスでgo_routerによる画面遷移のルールを定義する go_routerをインストールする Flutterプロジェクト直下にある pubspec.yaml を編集します。具体的には、以下の画像の赤線部分のように、dependencies に go_router を追加します。 図1. pubspec.yaml 画面のクラスを定義する 画面のクラスを定義します。main.dart と同じ階層に page1.dart, page2.dart を作成し、内容を以下のようにします。 copy_all page1.dartimport 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; class Page1 extends StatelessWidget { const Page1({super.key}); // 画面2に進む処理 void push(BuildContext context) { context.push('/2'); } @override Widget build(BuildContext context) { // 画面上部のバー部分 final appBar = AppBar( backgroundColor: Colors.yellow, title: const Text('画面1'), ); // 進むボタン final pushButton = ElevatedButton( onPressed: () => push(context), style: ElevatedButton.styleFrom(backgroundColor: Colors.yellow), child: const Text('進む'), ); return Scaffold( appBar: appBar, body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ pushButton, ], ), ), ); } } copy_all page2.dartimport 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; class Page2 extends StatelessWidget { const Page2({super.key}); // 画面1に戻る処理 void back(BuildContext context) { context.pop(); } @override Widget build(BuildContext context) { // 画面上部のバー部分 final appBar = AppBar( backgroundColor: Colors.cyan, title: const Text('画面2'), ); // 戻るボタン final backButton = ElevatedButton( onPressed: () => back(context), style: ElevatedButton.styleFrom(backgroundColor: Colors.cyan), child: const Text('戻る'), ); return Scaffold( appBar: appBar, body: Center( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ backButton, ], ), ), ); } } page1.dart では画面を進める処理として、context.push('$遷移先パス')が使われています。page2.dart では画面を戻す処理としてcontext.pop()が使われています。今は2画面のみの画面遷移を考えているので出てきていませんが、3画面以上の画面からなるアプリで、例えば「画面1から画面3に遷移する」といった画面遷移を考えるときにはcontext.go('$遷移先パス')が使えるとのことです。 それと、いずれのファイルでもimport 'package:go_router/go_router.dart';の一文を先頭に書き足すのを忘れないようにしましょう。 アプリ全体のクラスでgo_routerによる画面遷移のルールを定義する 先程作成した page1.dart, page2.dart と go_router のパッケージをインポートし、アプリ全体のクラス（ここではMyAppクラス）を次のように書きます。 copy_all main.dartimport 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:test/page1.dart'; import 'package:test/page2.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { MyApp({super.key}); final router = GoRouter( // アプリ起動時の画面を指定するパス initialLocation: '/1', // パスと画面の組み合わせ routes: [ GoRoute( path: '/1', builder: (context, state) => Page1(), ), GoRoute( path: '/2', builder: (context, state) => Page2(), ), ]); @override Widget build(BuildContext context) { return MaterialApp.router( routeInformationProvider: router.routeInformationProvider, routeInformationParser: router.routeInformationParser, routerDelegate: router.routerDelegate, ); } } ポイントは2点です。1点目は、 copy_allfinal router = GoRouter( // アプリ起動時の画面を指定するパス initialLocation: '/1', // パスと画面の組み合わせ routes: [ GoRoute( path: '/1', builder: (context, state) => Page1(), ), GoRoute( path: '/2', builder: (context, state) => Page2(), ), ]); の部分。routes のリストの要素である GoRoute のそれぞれがパス(path)と画面(builder)の組み合わせの定義を表します。path では画面を表すパスを引数として書き、builder では(context, state) => Xxxx()の形でどのクラスによって画面を作るかを指定します（Xxxx は画面を定義するクラス）。2点目は copy_all return MaterialApp.router( routeInformationProvider: router.routeInformationProvider, routeInformationParser: router.routeInformationParser, routerDelegate: router.routerDelegate, ); の部分。go_router を使う場合、この部分は以上のような決まった書き方をするとのこと。コピペで使いまわせばいいですね。 まとめ go_router を用いた画面遷移について備忘録としてまとめました。
