Better Navigation in Flutter using GetX
Learn how to make a customized robust navigation system for your application by using GetX library. You will be able to use guards and leverage dependency injection so easy you’ll love it.
Introduction
Navigation in a small application is not that hard you only need to use the standard navigation that flutter comes packaged with. But when your project grows you’ll want to add authentication, authorizations, dynamic links with all of this you’d probably want less time thinking how navigation is going to work with all of this and spend more time building your business logic. GetX does a good job of helping you do this using middlewares and bindings, child routes.
Get Started
This post assumes you already have a flutter project created so we won’t go through creating one. You however need to add get package to your pubspec.yaml file.
Your pubspec.yaml file should have the following.
After doing this you are all set to go now you can go and warm up with some coffee.
Defining our Routes
Getx navigation needs to be setup just before our app can use its functionalities. So replace MaterialApp in main.dart file with GetMaterialApp. This will allow us to use getx navigation functionalities. Notice the changes.
This is what you’ll have with a new flutter project but we’ll change MaterialApp widget to be the following.
So now you can separate your pages and use unique links to specify which one goes to which page using the GetPage name field. The links and pages can be separated into two different files or can be combined to one file. GetPage has the following properties that you can use.
For nested children it has a children property that allows you to associate a parent page with its children pages such as when you are using bottom bars or Tabs nested children will come in well.
Getx Routing
Navigating from one page to another is fairly simple you make use of Get.toNamed and pass in the link you don’t have to worry about forgetting which link is was since the links are globally passed. Hence moving to the dashboard would be as simple as
Passing Data between Routes.
Its not always about changing screens but about the data between the screens. Sometimes we need to pass the data between the routes either when we want to go to a new screen go back, move a couple of steps backward until a certain predicate or condition is passed, All of these scenarios can be covered. Here’s a simple way to do it.
Data is passed as a map of string as the name or key and its value as the data you want to send. The arguments take a dynamic type meaning they can type of data from String, integers, double, a List.
This method applies to all routing mechanism such as pop, offAllNamed etc.
Bindings
You can add dependency injection required for you page using Get bindings. You create the binding by extending the Bindings class and inject all dependencies there.
Get page can accept more than one binding. For example you can add more than one binding as an array passed to bindings. Or you can pass a single binding with binding property.
Setting Router Guards
As with any application you might need to add authentication and authorization. Getx allows you to add this by using Middlewares. You can add the middleware by extending the GetMiddleware class.
You can then add the middleware to where you want it applied in this case you can add it in the dashboard page route. The GetPage accepts an array of middlewares. Each middleware has an optional parameter that can be used to dictate the order in which the middlewares should be run. By default it is set to zero. But if we have another middleware we can set the priority.
All authentication guards have the following functions that you can override based on particular scenarios.
Redirect. When you make a route call this function is called first before any bindings and dependencies are injected. Its the best place to make authentication and authorization calls. It returns RouteSettings which take in route name. You can use the name to dictate where you want to redirect the client.
OnPageCalled. This function is called before the widget is built. This function allows you to pass necessary data. For example you would want to add username as a title to the AppBar.
OnBindingsStart. All pages that need a controller or a service would need dependencies will need to be added using bindings. Any validations can be done from within this function.
OnPageBuildStart. This function is called right after the bindings initialize and before the page is built.
OnPageDispose. Called right after disposing any controllers.
Page Transitions.
Getx helps create nice routing animations by passing a simple transition to Get navigate function.
Using a good routing system allows for easy navigation within your application. For our next tutorial we will see how we can use Firebase messaging and dynamic links to dynamically move within the app from sent links and notifications.
You can find the full source code here.
