Navigation in Flutter using AutoRoute, injectable and getIt
Navigation in Flutter is a vast topic with everyone having a different opinion on how to ace it. I’ve also explored few articles and tutorials and each one stands out on its own, but this one method of Navigation makes routing a lot simpler in complex apps.
It maybe because I am used to it, but I always keep going back to this particular method and in this article I want to share the details step by step. The process is broken down into 12 different steps, and every step here is crucial.
This article explains Navigation in Flutter using auto_route, injectable, and get_it packages. Combination of these packages simplify Navigation in Flutter with little boilerplate code.
Why should you use this method?
If your App requires deep-linking or guarded routes or just a clean routing setup you’ll need to use named/generated routes and you’ll end up writing a lot of boilerplate code for mediator argument classes, checking for required arguments, extracting arguments and a bunch of other stuff. AutoRoute does all that for you and much more.
Steps to create a new Route using Auto Route, injectable and getIt :
- First things first, there is a list of packages we need to import before going to Step2,
— freezed_annotation
— auto_route
— get_it
— injectable - Next step is to import some dev_dependencies:
— freezed
— build_runner
— injectable_generator
— auto_route_generator - Now that we have imported dependencies as well as dev_dependencies, create 2 simple widgets, HomePage() and DashboardScreen().
Similarly, create DashboardScreen().
4. Next, create a new file injection.dart and add the following code,
Through this, any call to instance in any package of a project will get the same instance of GetIt.
Once the code is added, run the flutter command in the terminal:
flutter pub run build_runner build — delete-conflicting-outputs
5. Create a new file and call it router.dart and register the two newly created widgets:
AutoRoute — It’s a Flutter navigation package, it allows for strongly-typed arguments passing, effortless deep-linking and it uses code generation to simplify routes setup, with that being said it requires a minimal amount of code to generate everything needed for navigation inside of your App.
In Step 6 and Step 7, we will discuss the parameters of AutoRoute.
After registering the routes, run the flutter command:
flutter pub run build_runner build — delete-conflicting-outputs
6. AutoRoute(page: HomePage, initial: true)
Here, AutoRoute takes in two parameters, page and initial.
page — Name of the widget that needs to be registered
initial — if this is the starting widget of the app, set it true.
HomePage is the starting point in the program, and that’s why the initial parameter is set to true.
7. AutoRoute(page: DashboardScreen, guards: [AuthGuard])
However, for DashboardScreen, initial parameter is not set, and that is because there can only be one initial widget in the app.
Also, there is another parameter called as guards, this parameter is used to ensure that only authenticated users can have access to this widget. Since we have no guards parameter for HomePage, both authenticated as well as unauthenticated users can enter HomePage.
8. At this point, you must be thinking how will my app know if a user is authenticated or not?
The following code is where the app checks if a user is authenticated or not. In my case, getUserToken() function is used to check for user’s token that was saved during last login. This part of authentication may be different for your app, and that is completely ok.
If the user is unauthenticated, push them back to HomePageRoute(),( route once registered using autoroute is referenced as WidgetNameRoute()), otherwise, if the user is authenticated, push them to the desired widget.
Once again, run the flutter command:
flutter pub run build_runner build — delete-conflicting-outputs
9. main.dart() modification
Call configureInjection in your main function before running the app,
10. add app_widget.dart that registers AppRouter
main.dart() calls AppWidget, and this is where AppRouter is registered and the navigation is set.
11. At this point, DashboardScreenRoute() can be navigated from anywhere in the program using the command,
getIt<AppRouter>().push(DashboardScreenRoute())Since we have registered the route inside AppRouter in step 3, we will be navigating to the route and not the widget using getIt, and this is how we introduce dependency injection in the app using getIt.
12. In order to pop the route off, use the command:
getIt<AppRouter>().pop()Check out the complete code on Github — https://github.com/SamiaAshraff/flutter_routing
Did I miss something? Feel free to leave a comment! Do you use a technique that uses little boilerplate code and simplifies Navigation?
