GetX Navigation
Learn how GetX navigation works at a basic level.
We'll cover the following...
- Set up the navigation with GetMaterialApp
- Defining named routes
- Navigating
- Navigate to page
- Navigating back
- Navigate to page and remove the current one
- Remove the current one and navigate to new page
- Remove pages until condition is satisfied
- Remove pages until condition is satisfied and navigate to a new page
- Remove all pages and navigate to a new page
- Remove a number of pages
- Hands-on example
- Navigator 2.0
Set up the navigation with GetMaterialApp
Setting up navigation with GetX is a one-step process of replacing MaterialApp with GetMaterialApp. MaterialApp is the fundamental Flutter widget that lays the foundation of most applications. It enables navigation, theming, locale, and keyboard shortcut systems in our apps. GetMaterialApp is a wrapper around MaterialApp that adds its own API layer on top of Flutter’s vanilla navigation system.
void main() {runApp(GetMaterialApp());}
It removes reliance on context and provides many useful features such as dynamic URLs and middlewares layer. It does all the heavy lifting under the hood, so we don’t have to. Now, we’re free to use the API as we like.
Defining named routes
Just like Flutter, we get the option to navigate using both named and unnamed routes. Before we jump to navigation, let us first learn to define named routes. We can define named routes in the GetMaterialApp in multiple ways. Let's walk through each of them one at a time.
Setting up routes with getPages
To define named routes, we specify them in the getPages parameter.
GetMaterialApp(// Takes in the list of pages.getPages: [// Defines home page against '/'.GetPage(name: '/', page: () => HomePage()),// Defines login page against '/login'.GetPage(name: '/login', page: () => LoginPage()),],);
getPages takes a list of GetPage classes. GetPage defines the route for us. We provide it a name and a corresponding page.
Conditionally defining a page
page takes in a function rather than taking the widget directly. This lets us define pages conditionally by writing the logic in the function and returning a page accordingly.
GetPage(name: '/login', page: () => isFirstLogin ? FirstLoginPage() : LoginPage()),
Here, we are checking if this is the user’s first login attempt. Accordingly, we display either the LoginPage or the FirstLoginPage (with a welcome message) against '/login' name.
Declaring subpages
There’s also a children property that lets us input a list of subpages.
GetPage(name: '/profile',page: () => ProfilePage(),children: [// Defines profile edit page against '/profile/edit'.GetPage(name: '/edit', page: () => ProfileEditPage()),// Defines profile settings page against '/profile/settings'.GetPage(name: '/settings', page: () => SettingsPage()),],),
The benefit of defining subpages is that we can directly specify '/profile/settings' while navigating. We don’t have to assign a name with complete path to each page.
Defining initial and unknown route
We can also specify the route that is first launched when the app is opened using the initialRoute property.
GetMaterialApp(// Defines the first page of the app.initialRoute: '/welcome',getPages: [GetPage(name: '/', page: () => HomePage()),GetPage(name: '/login', page: () => LoginPage()),GetPage(name: '/welcome', page: () => WelcomePage()),],);
Similarly, we can define an unknown route in case something unexpected occurs.
GetMaterialApp(unknownRoute: GetPage(name: '/notfound', page: () => NotFoundPage()),);
If the system couldn’t find the page we were looking for, it redirects to the page defined in unknownRoute. It can be for a variety of reasons, for example, if we try to navigate to the profile page of a user who doesn't exist.
Navigating
Now that we have defined our named routes, let us learn how we can navigate to them, and also the unnamed routes. We’ll discuss all the navigation methods below.
Navigate to page
We can navigate to an unnamed route using the to method, and to a named route using the toNamed method. Below, we are navigating to the home page in both the unnamed way and by providing its name, i.e., '/home'.
// Navigate to an unnamed routeGet.to(HomePage());// Navigate to a named routeGet.toNamed('/home');
We can also navigate to the subpages directly by providing their path. In the below code, we directly mention '/profile/settings' to navigate to the settings page that is defined as the child of the profile page.
// Navigate to sub-pageGet.toNamed('/profile/settings');