navigationKey.currentState is NULL (Flutter Web Advanced Navigation)

[ibrafayez]

Hello there, first of all, thank you very much for your tutorials it helped me a lot.

I've followed your Flutter Web Advanced Navigation tutorials and some other tutorials... like Template Layouts and Navigation in Flutter the app works fine when I implemented it.

However when I tried the Advanced Navigation it says that navigationKey.currentState is null when I navigate from the navigation bar

I think the problem is from the null safety or something... I still don't know :)

My NavigationService file:

class NavigationService {
  GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  Future<dynamic> navigateTo(String? routeName, {dynamic arguments}) async {
    var returned;
    try {
      print("navigatorKey.currentState: ${navigatorKey.currentState}");
      returned = navigatorKey.currentState?.pushNamed(routeName!);
      print("returned val!!: $returned");
      return navigatorKey.currentState!.pushNamed(routeName!, arguments: arguments);
    }
    catch(e){
      print("ERROR!: $e");
      print("returned val!!: $returned");
    }
  }

  void goBack() {
    return navigatorKey.currentState!.pop();
  }
}

I used the try-catch to see whats happing and the output is:

navigatorKey.currentState: null
returned val!!: null
ERROR!: Unexpected null value.
returned val!!: null

My main file (Some code is deleted for readability):

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context,child) => LayoutTemplate(child: child!),
      key: locator<NavigationService>().navigatorKey,
      onGenerateRoute: generateRoute,
      initialRoute: homeRoute,
    );
  }
}

Router file:

Route<dynamic> generateRoute(RouteSettings settings) {
  switch (settings.name) {
    case homeRoute:
      return _getPageRoute(const HomeBody(), settings);
    case aboutRoute:
      return _getPageRoute(const AboutUsBody(), settings);
    case projectsRoute:
      return _getPageRoute(const ProjectBody(), settings);
    case contactRoute:
      return _getPageRoute(const ContactUsBody(), settings);
    default:
      return _getPageRoute(const HomeBody(), settings);
  }
}
PageRoute _getPageRoute(Widget child, RouteSettings settings) {
  return MaterialPageRoute(builder: (context)=> child, settings: RouteSettings(name: settings.name),);
}

Navigation Function when you choose from the navigation bar:

Future<void> _navigate(String router) async {
    controller.fling(velocity: -1);
    locator<NavigationService>().navigateTo(router);
    await Future.delayed(const Duration(milliseconds: 500), (){});
    controller.fling(velocity: 1);
  }

I tried googling the problem everywhere and I couldn’t find the solution if you could please help me with it I would really appreciate it <3 .

[ibrafayez]

After all this time I've figured it out the problem was I was using key in the main.dart I should've used navigatorKey... ma bad

[faturah9]

After all this time I've figured it out the problem was I was using key in the main.dart I should've used navigatorKey... ma bad

how you can solved this problem???

[OwlCodR]

was I was using key in the main

Fixed by passing navigatorKey to MaterialApp