Best way of Navigation in Flutter without Context| A simple Guide

In this tutorial, we’ll explore how to implement navigation between different screens in a Flutter application using named routes without context.

Photo by Artur Shamsutdinov on Unsplash

We have to Define the following:

• Navigator Key
• Route Generator
• Default Route
• Dependency Injection using Package(Get_it).

First install the package Get_it from pub.dev, Now setup locator using Get it. The locator is used to access the Navigation Service throughout the app by registering it as a singleton using Get it.

GetIt locator = GetIt.instance;

void setLocator() {
  locator.registerLazySingleton<NavigationService>(() => NavigationService());
}

Now create a Navigation class which is used to handle navigation functionalities. It contains methods to push to a new route (pushTo) and go back to the previous screen (goBack). It also contains Global Key of Navigator State and dependency injection is employed using the GetIt package to register an instance of the NavigationService as a singleton. The locator instance serves as a centralized location for accessing the NavigationService throughout the application..

class NavigationService {
  final GlobalKey<NavigatorState> navigatorkey = GlobalKey<NavigatorState>();
  dynamic pushTo(String route, {dynamic arguments}) {
    return navigatorkey.currentState?.pushNamed(route, arguments: arguments);
  }

  dynamic goBack() {
    return navigatorkey.currentState?.pop();
  }
}

Setting Up Routes:
Define named routes in the generateRoutes function based on route names (“home”, “first”, “second”). These routes correspond to different screens.

Route<dynamic> generateRoutes(RouteSettings settings) {
  switch (settings.name) {
    case "home":
      return MaterialPageRoute(builder: (_) => HomeScreen());
    case "first":
      return MaterialPageRoute(builder: (_) => FirstScreen());
    case "second":
      return MaterialPageRoute(builder: (_) => SecondScreen());

    default:
      return MaterialPageRoute(builder: ((context) {
        return Scaffold(
          body: Center(
            child: Text("Error"),
          ),
        );
      }));
  }
}

Now we need to define in the main and Material App:

The MaterialApp widget is configured with initialRoute and onGenerateRoute properties. The initialRoute specifies the default route to be displayed, while onGenerateRoute is used to generate routes dynamically based on the route name.

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "home",
      onGenerateRoute: generateRoutes,
      navigatorKey: locator<NavigationService>().navigatorkey,
    );
  }
}

We’ll create a basic setup with three screens: HomeScreen, FirstScreen, and SecondScreen, allowing the user to move between them using predefined routes. Following code will be used for navigation:

For moving to another screen:

locator<NavigationService>().pushTo("first");
locator<NavigationService>().pushTo("second");
locator<NavigationService>().pushTo("home");

For moving backward:

locator<NavigationService>().goBack();

That’s all, Wish you Good Luck.