Flutter auto_router: Error: Type 'NavigatorState' not found

Question

问题总结

嗨，我在 Flutter 项目中获取 auto_route 包和运行ning 时遇到问题。根据官方文档，我做了以下操作：

创建了一个用 @MaterialAutoRouter
运行代码生成器（使用 --enable-experiment=enhanced-enums）
将路由器 class 连接到 MaterialApp

一旦我尝试运行使用 flutter run 的应用程序，这是我收到的错误消息：

lib/app_router.gr.dart:16:26: Error: Type 'NavigatorState' not found.
  _$AppRouter([GlobalKey<NavigatorState>? navigatorKey]) : super(navigatorKey);
                         ^^^^^^^^^^^^^^
lib/app_router.gr.dart:16:16: Error: Type 'GlobalKey' not found.
  _$AppRouter([GlobalKey<NavigatorState>? navigatorKey]) : super(navigatorKey);
               ^^^^^^^^^
lib/app_router.gr.dart:16:26: Error: 'NavigatorState' isn't a type.
  _$AppRouter([GlobalKey<NavigatorState>? navigatorKey]) : super(navigatorKey);
                         ^^^^^^^^^^^^^^
lib/app_router.gr.dart:16:16: Error: 'GlobalKey' isn't a type.
  _$AppRouter([GlobalKey<NavigatorState>? navigatorKey]) : super(navigatorKey);

附加信息

flutter --version的输出：

Flutter 3.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ee4e09cce0 (3 days ago) • 2022-05-09 16:45:18 -0700
Engine • revision d1b9a6938a
Tools • Dart 2.17.0 • DevTools 2.12.2

具有相关依赖项的 pubspec.yaml 文件的摘录

environment:
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  auto_route: ^4.0.1
 
dev_dependencies:
  auto_route_generator: ^4.0.0
  build_runner: ^2.1.10

代码和其他尝试

(1) 占位符 class (app_router.dart) 注释为 @MaterialAutoRouter...

part 'app_router.gr.dart';

const authRoutes = AutoRoute(
  name: 'AuthRouter',
  path: '/',
  initial: true,
  page: LoginScreen,
);

@MaterialAutoRouter(
  routes: <AutoRoute>[authRoutes],
)
class AppRouter extends _$AppRouter {}

...和 (2) flutter pub run build_runner build --enable-experiment=enhanced-enums --delete-conflicting-outputs 命令的自动生成代码 (app_router.gr.dart)

// **************************************************************************
// AutoRouteGenerator
// **************************************************************************

// GENERATED CODE - DO NOT MODIFY BY HAND

// **************************************************************************
// AutoRouteGenerator
// **************************************************************************
//
// ignore_for_file: type=lint

part of 'app_router.dart';

class _$AppRouter extends RootStackRouter {
  _$AppRouter([GlobalKey<NavigatorState>? navigatorKey]) : super(navigatorKey);

  @override
  final Map<String, PageFactory> pagesMap = {
    AuthRouter.name: (routeData) {
      return MaterialPageX<dynamic>(
          routeData: routeData, child: const LoginScreen());
    }
  };

  @override
  List<RouteConfig> get routes => [RouteConfig(AuthRouter.name, path: '/')];
}

/// generated route for
/// [LoginScreen]
class AuthRouter extends PageRouteInfo<void> {
  const AuthRouter() : super(AuthRouter.name, path: '/');

  static const String name = 'AuthRouter';
}

最后，(3)，这就是我将它与 MaterialApp 联系起来的方式：

class App extends StatelessWidget {
  final AppRouter _router = AppRouter();

  App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: _router.delegate(),
      routeInformationParser: _router.defaultRouteParser(),
      debugShowCheckedModeBanner: false,
      theme: AppTheme.lightThemeData(context),
    );
  }
}

我昨天已经迁移到 Flutter 3，同时也开始使用增强型枚举。没有 --enable-experiment=enhanced-enums 标志，代码生成器似乎无法工作。我已经尝试使用和不使用相同的标志运行ning 应用程序 (flutter run)，但上述错误仍然存在。

如果有人对可能出现的问题有任何想法，我们将不胜感激。谢谢。

Answer 1

好的，我找到了解决办法。这是微不足道的，是由不完整的文档引起的。浏览 auto_route GitHub 问题页面后，我发现 this，从 2021 年 12 月 1 日开始。

修复方法是添加

import 'package:flutter/material.dart';

到占位符 class（在我的例子中，app_router.dart）。因此，

// + other relevant imports
import 'package:flutter/material.dart';

part 'app_router.gr.dart';

const authRoutes = AutoRoute(
  name: 'AuthRouter',
  path: '/',
  initial: true,
  page: LoginScreen,
);

@MaterialAutoRouter(
  routes: <AutoRoute>[authRoutes],
)
class AppRouter extends _$AppRouter {}

编辑（2022 年 3 月 16 日）：正如 Yogi Arif Widodo 在下面的评论中指出的那样，如果需要，您可能想要同时导入 Material 和 Cupertino它

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

Flutter auto_router: Error: Type 'NavigatorState' not found