Flutter auto_router: Error: Type 'NavigatorState' not found

Question

Problem summary

Hi, I have an issue getting the auto_route package up and running in a Flutter project. Following the official documentation, I have done the following:

1. Created a placeholder class annotated with @MaterialAutoRouter
2. Ran the code generator (using --enable-experiment=enhanced-enums)
3. Hook up the router class with MaterialApp

Once I attempt to run the app with flutter run, this is the error message I'm given:

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);

Additional information

The output of 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

Excerpt of pubspec.yaml file with relevant dependencies

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

Code & additional attempts

(1) Placeholder class (app_router.dart) annotated with @MaterialAutoRouter...

part 'app_router.gr.dart';

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

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

...and the autogenerated code of (2) flutter pub run build_runner build --enable-experiment=enhanced-enums --delete-conflicting-outputs command (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';
}

Lastly, (3), this is how I hooked it up with the 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),
    );
  }
}

I have migrated to the Flutter 3 yesterday, and simultaneously started using enhanced enums as well. Without the --enable-experiment=enhanced-enums flag, the code generator doesn't seem to work. I have tried running the app (flutter run) with and without the same flag, but the aforementioned error persists.

If someone has any idea on what could have potentially gone wrong, any help is greatly appreciated. Thank you.

Solution

OK, I have found a solution. It's trivial and caused by incomplete documentation. After browsing the auto_route GitHub issues page, I found this, from December 1st, 2021.

The fix is to add

import 'package:flutter/material.dart';

to the placeholder class (in my case, app_router.dart). Therefore,

// + 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 {}

Edit (March 16, 2022): as Yogi Arif Widodo pointed point in the comment below, you might wanna import both Material and Cupertino, should you need it

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

Comments

[Yogi Arif Widodo]

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