Search⌘ K
AI Features
Home
Courses
The Flutter GetX Ecosystem

Introduction to Route Management

Explore how GetX provides a simpler and more powerful navigation system for Flutter apps. Learn to manage routes without context, pass data easily, implement dynamic URLs, handle overlays, use middleware for navigation control, and manage nested navigation keys. This lesson helps you build robust and maintainable navigation flows in scalable applications.

We'll cover the following...

Importance of navigation system

Navigation is the foundational feature of any kind of application. It’s hard to imagine an app without a page navigation system. While simple at its core, navigation can get incredibly tricky as our application scales. There can be hundreds of screens, multiple navigation stacks, dynamically generated pages, and whatnot. Hence, it becomes necessary that the app’s navigation system is robust and maintainable. Let’s see how Flutter handles it!

Flutter’s navigation system

Flutter provides a decent API to navigate to different pages, navigate back, remove pages from the stack, etc. While it can handle complex scenarios like nested navigation and dynamic page URLs (with Navigator 2.0), it falls short in simplicity. Things get out of hand pretty quickly.

Not to mention that the syntax for even basic page navigation is quite verbose. See how we navigate to a page in Flutter:

Dart
// Pushes to a new route.
Navigator.push(
  // Requires context from the current route.
  context,
  // Need to wrap the widget with [MaterialPageRoute].
  MaterialPageRoute(
    builder: (context) => HomePage(),
  ),
);

We utilize Navigator's push method to navigate to a new page. It requires us to provide the context of the current page and also wrap the HomePage widget with MaterialPageRoute to convert it into a route.

GetX’s navigation system

GetX, on the other hand, provides a promising navigation system that not only offers a simpler syntax, but is also feature rich. Here’s how we perform the same operation using GetX:

Dart
Get.to(HomePage());

There’s no need to pass context, so we can call it from business logic. Neither do we have to define a MaterialPageRoute explicitly. Just specify the page and we’re good to go.

Data transfer

Transferring data between the pages is as simple as providing it in the arguments parameter of the navigation method and retrieving it on the other side with Get.arguments.

Dart
// Sending data
Get.to(HomePage(), arguments: data);
// Receiving data
Get.arguments

Dynamic URLs

GetX enables us to render pages dynamically by passing in parameters that are also displayed in page’s URL as queries.

Dart
// Define parameters
Get.toNamed('/profile/Aachman?age=23&author=yes');
// Access parameters
Get.parameters // returns {'age': '23', 'author': 'yes'}

Overlays

Open overlays such as dialog and bottomsheet without context.

Dart
Get.dialog(MyDialog());
Get.bottomsheet(MyBottomsheet());

Middleware

A powerful feature of GetX’s route management is the ability to attach middlewares to a page that intercept the navigation flow at various stages. This gives us fine-grained control over the whole process and we can define rules or perform actions at the different steps of navigation.

Dart
@override
RouteSettings? redirect(String? route) {
  if (loggedIn) {
    return null;
  } else {
    return RouteSettings(name: '/login');
  }
}

In the above code, we are checking whether user is logged in or not. If not, they are redirected to the login page.

Nested navigation

GetX simplifies nested navigation by helping us manage the navigation key. We can provide a unique integer to Get.nestedKey() and it’ll create a key for us. Use the same integer while navigating and we’ll be taken to the local navigator instead of the global one.

Dart
// Provide a unique key to the navigator
Navigator(
  key: Get.nestedKey(0),
  ...   
);
// Navigate in the local stack using the same key
Get.toNamed('/feed/post', id: 0);

Like it so far? This was just the tip of the iceberg. In this chapter, we will dive deep into GetX’s route management system and discuss all of its features in detail.