flutter auto_router : Error: Type 'NavigatorState' not found

Question

问题总结

您好，我在获取 auto_route 时遇到问题打包并在 Flutter 项目中运行。按照官方文档，我做了以下事情:

1. 创建了一个用 @MaterialAutoRouter 注释的占位符类>
2. 运行代码生成器(使用 --enable-experiment=enhanced-enums)
3. 使用 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) 用@MaterialAutoRouter注解的占位符类(app_router.dart)...

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 标志，代码生成器似乎无法工作。我已尝试使用和不使用相同标志运行应用程序 (flutter run)，但上述错误仍然存​​在。

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

Answer 1

好的，我找到了解决方案。这是微不足道的，是由不完整的文档引起的。浏览完 auto_route GitHub issues 页面后，我找到了 this , 自 2021 年 12 月 1 日起。

修复是添加

import 'package:flutter/material.dart';

到占位符类(在我的例子中，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';