🪆

AutoRoute入れたらビルドできなくなった!

2023/09/06に公開

Flutter

autoroute

tech

急に動かなくなった😱

最近話題になっている auto_route というパッケージを使っていたのですが、以前作ったものを動かそうとしたらビルドできなくなった!

新しくプロジェクトを作ってもダメだった😇

error code

Error: No named parameter with the name 'uri'.
auto_router_delegate.dart:87
          RouteInformation(uri: Uri.parse(url)),

参考になりそうな情報がない?
Githubのissuesを見つけて、Flutterのバージョンを新しくしたら治るぽい?

Flutter3.10.5 -> 3.13.2に変更したら治った🙌

設定したソースコード

pagesディレクトリにfuga.dartとhoge.dartの２ページを作った。

pages/fuga.dart

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

@RoutePage()
class FugaScreen extends StatelessWidget {
  const FugaScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Fuga')),
    );
  }
}

最初に表示されるページ

pages/hoge.dart

import 'package:auto_route/auto_route.dart';
import 'package:auto_route_app/router/router.dart';
import 'package:flutter/material.dart';

@RoutePage()
class HogeScreen extends StatelessWidget {
  const HogeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hoge')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Fugaへ遷移
            AutoRouter.of(context).push(FugaRoute());
          },
          child: const Text('Fugaへ'),
        ),
      ),
    );
  }
}

ルートの設定ファイル

UIを作ったら、@RoutePage()のアノテーションをつけて、自動生成のコマンドを打つ。
get router => [] の中のコードはファイルが自動生成されるまで読み込めない。

router/router.dart

import 'package:auto_route/auto_route.dart';
import 'package:auto_route_app/pages/fuga.dart';
import 'package:auto_route_app/pages/hoge.dart';

part 'router.gr.dart';// ファイル名と同じ名前にして、.gr.dartをつける

@AutoRouterConfig()
class AppRouter extends _$AppRouter {// _をつけないと怒られる!

 @override
 List<AutoRoute> get routes => [
  // flutter pub run build_runner watch を実行した後にファイルが自動生成されたら、
  // このAutoRouteを追加できる。
    AutoRoute(page: HogeRoute.page, initial: true),
    AutoRoute(page: FugaRoute.page),
  ];
}

自動生成されたコード。ここに、HogeRoute.pageの情報が書かれている。importするページの情報は自動生成されたファイルを確認すると書いてある。

router/router.gr.dart

// GENERATED CODE - DO NOT MODIFY BY HAND

// **************************************************************************
// AutoRouterGenerator
// **************************************************************************

// ignore_for_file: type=lint
// coverage:ignore-file

part of 'router.dart';

abstract class _$AppRouter extends RootStackRouter {
  // ignore: unused_element
  _$AppRouter({super.navigatorKey});

  @override
  final Map<String, PageFactory> pagesMap = {
    FugaRoute.name: (routeData) {
      return AutoRoutePage<dynamic>(
        routeData: routeData,
        child: const FugaScreen(),
      );
    },
    HogeRoute.name: (routeData) {
      return AutoRoutePage<dynamic>(
        routeData: routeData,
        child: const HogeScreen(),
      );
    },
  };
}

/// generated route for
/// [FugaScreen]
class FugaRoute extends PageRouteInfo<void> {
  const FugaRoute({List<PageRouteInfo>? children})
      : super(
          FugaRoute.name,
          initialChildren: children,
        );

  static const String name = 'FugaRoute';

  static const PageInfo<void> page = PageInfo<void>(name);
}

/// generated route for
/// [HogeScreen]
class HogeRoute extends PageRouteInfo<void> {
  const HogeRoute({List<PageRouteInfo>? children})
      : super(
          HogeRoute.name,
          initialChildren: children,
        );

  static const String name = 'HogeRoute';

  static const PageInfo<void> page = PageInfo<void>(name);
}

main.dartでAppRouterクラスを読み込めがビルドできるようになる。

main.dart

import 'package:auto_route_app/router/router.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    // AppRouterクラスをインスタンス化
    AppRouter appRouter = AppRouter();
    return MaterialApp.router(// MaterialApp.routerを使用
      routerConfig: appRouter.config(),
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
    );
  }
}

ビルドした状態
go routerと違ってスタックが削除されないのか、AppBarに戻るボタンが表示されるようだ。

最後に

画面遷移のパッケージを使うことが最近多いのですが、毎回よくわからないエラーでハマるのは辛いですね😅
今日はお腹も痛かったから、すごく苦痛でした😇
皆さんも似たようなエラーが出たら、Flutterのバージョンを上げてみて下さい。

急に動かなくなった😱

設定したソースコード

ルートの設定ファイル

最後に

Discussion