Flutterでルートをまとめるファイルを作る

はじめに

こんにちは、エンジニアのkeitaMaxです。
画面遷移などを実装してみようと思います。

内容

go_routerという画面遷移のライブラリを作成してみようと思います。

以下のコマンドでgo_routerをインストールします。

flutter pub add go_router

pubspec.yamlにライブラリが追加されます。

スクリーンの作成

TopScreenとSecondScreenを作成します。
以下のようなフォルダ・ファイルを作成します。

lib/
├── main.dart
└── screens/
    ├── top/
    │   └── top.dart
    └── second/
        └── second.dart

top.dartからsecond.dartに行けるようにします。
とりあえず以下のようにそれぞれに記載します。

top.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TopScreen')),
      body: const Center(child: Text('Top Screen')),
    );
  }
}

second.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('SecondScreen')),
      body: const Center(child: Text('Second Screen')),
    );
  }
}

app_router.dartファイルの作成

/lib/core/router/app_router.dartを作成します。
ここにルートをまとめて書いていきます。

app_router.dartを以下のようにします。

app_router.dart

import 'package:go_router/go_router.dart';

import '../../screens/second/second.dart';
import '../../screens/top/top.dart';

final appRouter = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      path: '/',
      name: 'top',
      builder: (context, state) => const TopScreen(),
    ),
    GoRoute(
      path: '/second',
      name: 'second',
      builder: (context, state) => const SecondScreen(),
    ),
  ],
);

/でアクセスした時にはTopScreenが、/secondでアクセスした時にはSecoundScreenが表示されるように設定しました。

main.dartの修正

ルートをapp_router.dartを読み込むように修正します。

app_router.dart

import 'package:flutter/material.dart';
import 'core/router/app_router.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      title: 'My Flutter App',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF464544)),
        useMaterial3: true,
      ),
      routerConfig: appRouter, // ← app_router.dart のルーター設定を使用
    );
  }
}

これでおそらくルートを作れたと思います。

確認

flutter runをコマンドラインで実行してブラウザでアクセスできるか確認します。
flutter runを実行してChromeを選択します。

ブラウザで開くと/でアクセスされるはずです。以下のように見えるはずです。

/でアクセスをするとTOPが見えるようになりました。

次は/secondでアクセスして見ます。

このようにSecondScreenが見えません。

これは、Flutter Web は初期設定で「ハッシュ付き URL」という方式を使雨らしいです。http://localhost:60454/#/second といった #/ 以降だけをアプリに渡す仕組みらしいです。

なのでhttp://localhost:60454/#/secondでアクセスをして見ます。

するとこのようにSecondScreenを表示することができます。

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

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

参考