invalid member on null: 'key'

[rlee1990]

I am receiving an error invalid member on null: 'key' when trying to build the app.

`class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  @override
  Widget build(BuildContext context) {
    final themeData = Provider.of<ThemeState>(context);
    final connectionStatus = Provider.of<ConnectionStatus>(context);
    return OverlaySupport(
      child: MultiProvider(
        providers: [
          StreamProvider<UserPublic>(
            create: (context) => FirestoreService().streamPublicUser(Provider.of<User>(context, listen: false).uid),
          ),
        ],
          child: MaterialApp(
            builder: ExtendedNavigator.builder(
              router: SnabRouter(),
              guards: [AuthGuard()],
            ),
          title: 'SNAB',
          theme: themeData.getTheme(),
          debugShowCheckedModeBanner: false,
        ),
      ),
    );
  }
}`

[√] Flutter (Channel master, 1.23.0-14.0.pre.84, on Microsoft Windows [Version 10.0.19041.508], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] VS Code (version 1.50.0)
[√] Connected device (3 available)

• No issues found!

[hauketoenjes]

Same problem here, the issue seems to occur on all platforms (i tested android and web).

The invalid member on null: 'key' occurs in line 37 in the ExtendedNavigator :
https://github.com/Milad-Akarie/auto_route_library/blob/master/auto_route/lib/src/extended_navigator.dart#L37

I tested with the provided example code of this package.

[rlee1990]

@hauketoenjes I think that the application is not generating the key

[rlee1990]

@Milad-Akarie any idea on this?

[hauketoenjes]

I just tested on another channel of flutter than master and the problem is gone. Probably a temporary problem on the flutter side. Seems to be no problem with this package imo.

[rlee1990]

Okay cool good to now Sucks because the master has the fix for the URL hash for Flutter web. @hauketoenjes I wonder if there was a breaking change for the newest version of master that is not yet compatible with this. I will close this for now.

[rlee1990]

I have to reopen it as I can only use the master channel and the hash URL fix will come to beta but I think the problem might come also for this package down then line.

[rlee1990]

@hauketoenjes I found the issue it is with the package. the issue is with line (context, nav) { var extendedNav = ExtendedNavigator<T>( // key: GlobalObjectKey(nav.key), navigatorKey: navigatorKey, observers: observers, onUnknownRoute: onUnknownRoute, initialRoute: initialRoute, initialRouteArgs: initialRouteArgs, router: router, guards: guards, name: name, );
Commenting out the key works. It looks like the key is never being supplied from the builder.

[mx1up]

having the same problem on beta

Flutter 1.22.0-12.1.pre • channel beta • https://github.com/flutter/flutter.git
Framework • revision 8b3760638a (4 weeks ago) • 2020-09-15 17:47:13 -0700
Engine • revision 4654fc6cf6
Tools • Dart 2.10.0 (build 2.10.0-110.3.beta)

[rlee1990]

@mx1up did you try what I did above?

[mx1up]

@rlee1990 yes, commenting out that line does make it work again..

[karabanovbs]

Hi, something change in flutter WidgetApp.
Look at this getter

This way should work.

Or just set not null value in home or onGenerateRoute or onUnknownRoute or set not empty routes

MR: flutter/flutter#67574

Looks like this package problem.

[afermin]

HI @rlee1990. Do you mean we have to comment the line in the library? I don't have it in my local

[rlee1990]

@afermin yes that was how I got it to work. We have to wait until @Milad-Akarie fixes the issue.

[eggnstone]

Is there a better workaround?
Me commenting out the line in your library does not seem like a good solution.
How about changing
key: GlobalObjectKey(nav.key),
to
key: nav == null ? null : GlobalObjectKey(nav.key),

[mars3142]

That's why I created a pull request, which seems to be ignored. 🤔

[Milad-Akarie]

Hello all,
sorry for the late replay. The purpose of using the builder is using the nav.key to maintain navigator state when Flutter inspector reloads the App, in other words, without the key we don't need the builder! so for now you can just build your ExtendedNavigator using the default constructor.

[SamuelMTDavies]

Don't want to comment out lines of the package? Try to remove the .builder part of your navigator like below.

MaterialApp(
      builder: ExtendedNavigator<AppRouter>(
        router: AppRouter(),
        guards: [AuthGuard()],
        initialRoute: '/',
      ),
    );

@Milad-Akarie I'm happy to write a pull request to update the docs to make them clearer - I just need to understand the main differences and functionality of the builder. Can you please elaborate on what the purpose of the builder is and the difference between the two code samples in the docs?

[Milad-Akarie]

@SamuelMTDavies When Flutter inspector is launched (widget select mode) specifically, MaterialApp reloads and the navigator loses state, as a work around I'm using the native nav's key whiches maintained by the MaterialApp to create a global object key to restore ExtendedNavigator state on App reloads

[Milad-Akarie]

@SamuelMTDavies I'm really close to launching auto_route 1.0-beta which is based on navigator 2.0.
Extended Navigator has alot of work a rounds due to its limited Api flexibility. So it will probably be merely maintained as legacy

[mars3142]

@Milad-Akarie How can I use the default ExtendedNavigator constructor with something like a custom transition builder function. I need that, because I want always to wrap my screens with a stack, so I can dynamic add widgets. That's why I currently need the builder factory constructor.

[florian-gustin]

@mars3142 @Milad-Akarie

Hello, actually that you can perform to wait for auto_route 1.0 on navigator 2.0 and if you still got the issue is this trick :

    home: AnyWidgetYouWant(),  // I did SizedBox(),
    builder: ExtendedNavigator.builder<router.Router>(
      guards: [AuthGuard()],
      router: router.Router(),
      builder: (context, extendedNav) => Theme(
          data: ThemeData(
            scaffoldBackgroundColor: cWhite,
            fontFamily: primaryFontFamily,
          ),
          child: extendedNav),
    ),

This solve my invalid member on null:key issue. It is temporary. Commenting the navigator.key on the library didn't change anything to the issue only this does.

Hope it helps.

[wer-mathurin]

Thanks @Flow2dot0 just adding Container() solve the issue !

[2shrestha22]

Same problem after updating to Flutter 2.0 today.

[sath26]

the problem occured in mine as well. it occred without the flutter update.

[thenifemi]

Same here @2shrestha22 @sath26 .. I fixed it by removing the .builder from

 builder: ExtendedNavigator.builder(
        navigatorKey: navigatorKey,
        router: AppRouter(),
      ),

and change it to

builder: ExtendedNavigator(
       navigatorKey: navigatorKey,
       router: AppRouter(),
     ),

[sath26]

where does the right side of this navigatorKey:navigatorKey come from for assignment.? @thenifemi

[thenifemi]

@sath26 Ignore it, don't include it.

[sath26]

i get undefined name 'navigatorKey' error @thenifemi

[thenifemi]

Interesting!
Add:

 GlobalKey<NavigatorState> navigatorKey;

and then in your MaterialApp widget:

builder: ExtendedNavigator(
       navigatorKey: navigatorKey,
       router: AppRouter(),
     ),

[sath26]

@thenifemi

A GlobalKey was used multiple times inside one widget's child list.

The offending GlobalKey was: [GlobalObjectKey _MaterialAppState#8c8b7]
The parent of the widgets with that key was: HeroControllerScope
The first child to get instantiated with that key became: WidgetsApp-[GlobalObjectKey _MaterialAppState#8c8b7]
    state: _WidgetsAppState#d0aa5
The second child that was to be instantiated with that key was: HeroControllerScope
A GlobalKey can only be specified on one widget at a time in the widget tree.

i got the above error. unable figure out the reason behind the error. i have added

GlobalKey<NavigatorState> navigatorKey;

in following way

class AppWidget extends StatelessWidget {
  GlobalKey<NavigatorState> navigatorKey;
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider(
          create: (context) =>
              getIt<AuthBloc>()..add(const AuthEvent.authCheckRequested()),
        )
      ],
      child: MaterialApp(
        title: 'Shamagri - bill sharing app',
        debugShowCheckedModeBanner: false,
        builder: ExtendedNavigator(
          navigatorKey: navigatorKey,
          router: app_router.Router(),
          //initialRoute: app_router.Routes.splashScreen
        ),
        theme: ThemeData.light().copyWith(
          primaryColor: Colors.green[800],
          accentColor: Colors.blueAccent,
          floatingActionButtonTheme: FloatingActionButtonThemeData(
            backgroundColor: Colors.blue[900],
          ),
          inputDecorationTheme: InputDecorationTheme(
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
            ),
          ),
        ),
      ),
    );
  }
}

[thenifemi]

Please put the GlobalKey<NavigatorState> navigatorKey; in your build function.

[pvaibhav]

Just adding a data point for anyone using WidgetsApp on flutter 2, the following worked for me:

Use ExtendedNavigator(router: MyRouter()) where MyRouter is your generated class.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return WidgetsApp(
        color: Colors.blue, builder: ExtendedNavigator(router: MyRouter()));
  }
}