【Flutter】go_routerを使って簡単な画面遷移を実装する

はじめに

go_routerを使って簡単な画面遷移を実装する方法を解説します。 go_routerは”異なる画面間を移動するための便利なURLベースのAPIを提供するFlutterの宣言型ルーティングパッケージ”です。 go_routerを使うとflutterの画面遷移やルーティング管理をとてもシンプルなコードで実装できます。

開発環境

• Flutter version 3.11.0
• Dart 3.1.0
• go_router 9.0.3

flutter_rating_barパッケージをインストール

go_router ( https://pub.dev/packages/go_router ) というパッケージを使用します。 以下のコマンドで、go_routerをインストールしてください。 flutter pub add go_router
flutter pub get

GoRouterクラスのインスタンスの実装

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/', //パス（'/'はルートパスを示している）
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();//遷移する先のクラス
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);

ここでは、アプリケーションのルーティング構造を定義しています。 各GoRouteオブジェクトは、'path', 'builder', 'routes' のプロパティを持っています。

path: パス（'/'はルートパスを示す）

builder: 指定されたパスに遷移するときに表示されるウィジェットを構築するための関数。 この関数を使用して、遷移先のウィジェットを作成します。 BuildContextとGoRouterStateを引数に取ることができ、必要に応じてそれらを使用してウィジェットに情報を渡すこともできます。

routes: 親のGorouteに遷移した後、routes内のGorouteへの遷移が可能になります。（入れ子みたいなイメージ。）

コード全文

具体的には以下のようにして使います。

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

void main() => runApp(const MyApp());

final GoRouter _router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details',
          builder: (BuildContext context, GoRouterState state) {
            return const DetailsScreen();
          },
        ),
      ],
    ),
  ],
);

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ホーム画面')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/details'),
          child: const Text('詳細画面へ移る'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('詳細画面')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => context.go('/'),
          child: const Text('ホーム画面へ戻る'),
        ),
      ),
    );
  }
}

さいごに

go_routerを使えば複雑な画面遷移でもシンプルで分かりやすいコードで実装できます。 シンプルになると見返した時にとても分かりやすいので、どんどん使っていきましょう！