beamerでルーティングを定義

この記事は、「Flutter Advent Calendar 2021」に投稿した「Flutter on the WebをFirebase Hostingで公開した」の一部となります。

ルーティング

Flutterのルーティングは当初、Navigator 1.0で記述していたのですが、Navigator 2.0 に対応した方がページ遷移やURLの反映がすっきりするとわかったので書き換えました。
ただ、Navigator 2.0はまじめに書くとシンプルなルーティングでもコーディングが多過ぎるのでbeamerパッケージを利用しています。

パッケージを追加して、

$ flutter pub add beamer

ルーティングを定義、

main.dart

import 'package:beamer/beamer.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
        routeInformationParser: BeamerParser(),
        routerDelegate: BeamerDelegate(
            initialPath: '/',
            locationBuilder: RoutesLocationBuilder(routes: {
              '/': (context, state, data) => MyHomePage(), // ホーム
              '/horse/:horseId': (context, state, data) => HorsePage(
                  horseId: int.parse(state.pathParameters['horseId'] ?? '1')), // 馬ページ
              '/race/:raceId': (context, state, data) => RacePage(
                  raceId: int.parse(state.pathParameters['raceId'] ?? '1')), // レースページ
              '/series/:seriesId': (context, state, data) => SeriesPage(
                  seriesId: int.parse(state.pathParameters['seriesId'] ?? '1')) // レース履歴ページ
            }),
      ));
  }
}

ボタンからはbeamToNamedと記述すれば遷移します。

main.dart

ElevatedButton(
    child: Text('Go to race 1'),
    onPressed:() => Beamer.of(context).beamToNamed('/race/1'))

欠点は、けっこう仕様、というか定義が変わるところでしょうか。
ここ7ヶ月で2回ルーティングの定義を書き直しました。
さほど手間ではないのですが、flutter pub upgradeした後にvscode上でコードがエラーになって赤く変わるのは心臓によくありませんでした。

以上です。