【Flutter】「go_router」を用いた画面遷移の説明とサンプル（コピペOK！）

今回は、Flutterで「go_router」というライブラリを用いた画面遷移を実装するサンプルです。

Flutterでの画面遷移については以前も記事にしたことがありますが、その時はFlutter標準の「Navigator」を用いた方法について解説しました。

今回の記事では、Navigatorを使いやすく簡潔に実装できるようにしたライブラリである「go_router」についての説明となります。

この記事で分かること

✅「go_router」の使い方

サンプル画面
サンプルコード
- 全文（main.dart）
- 実装手順の説明
まとめ

サンプル画面

以下画面のようにボタン押下で画面遷移するサンプルです。

サンプルコード

全文（main.dart）

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

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

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

  @override
  Widget build(BuildContext context) {

    //ルーティング設定
    return MaterialApp.router(
      routeInformationProvider: router.routeInformationProvider,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );
  }
}

//go_routerを用いたルート定義
final GoRouter router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) => Top(),
    ),
    GoRoute(
      path: '/home',
      builder: (BuildContext context, GoRouterState state) => Home(),
    ),
  ],
);

//トップ画面
class Top extends StatelessWidget {
  const Top({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            router.push('/home');
          },
          child: Text('ログイン'),
        ),
      ),
    );
  }
}

//ホーム画面
class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: (){
            router.pop();
          },
          child: Text('ログアウト'),
        ),
      ),
    );
  }
}

実装手順の説明

①「pubspec.yaml」に「go_router」を追加する

dependencies:
  flutter:
    sdk: flutter

  go_router: ^13.2.4

まずは以下の「go_router」ライブラリを追加してpub getします。

go_router | Flutter package

②importする

以下をファイルの最初に記述します。

import 'package:go_router/go_router.dart';

③ルーティング設定をする

アプリケーションのエントリーポイント（サンプルではMyAppの中）で以下設定を記述します。

//ルーティング設定
    return MaterialApp.router(
      routeInformationProvider: router.routeInformationProvider,
      routeInformationParser: router.routeInformationParser,
      routerDelegate: router.routerDelegate,
    );

以下に詳細を書いておきますが半分おまじない程度の認識でも特に問題ないです。笑

routeInformationProvider	ルーティング情報を提供します。通常、現在のURLを提供します。この情報は、アプリケーションがナビゲートするために使用されます。
routeInformationParser	routeInformationProviderから提供される情報を解析します。この解析により、アプリケーションが理解できる形式に情報が変換されます。
routerDelegate	アプリケーションのナビゲーションスタックを管理します。具体的には、どのページが表示されるべきかを決定します。

④ルート（画面遷移先）の定義をする

//go_routerを用いたルート定義
final GoRouter router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) => Top(),
    ),
    GoRoute(
      path: '/home',
      builder: (BuildContext context, GoRouterState state) => Home(),
    ),
  ],
);

このように画面遷移先の分だけGoRouteで定義をしていきます。

⑤画面遷移をする

router.push('/home');

④で定義したルートの「path」プロパティの値を引数に設定することで画面遷移ができます。Navigatorでの画面遷移よりかなりシンプルになりましたね！

まとめ

今回はFlutterでgo_routerを用いて画面遷移を実装するサンプルでした。この機会にぜひ理解を深めていきましょう！

最後までお読みいただきありがとうございました！

文系プログラマーが語る

主にプログラミング関連の記事を書いています。