Flutter Navigator 2.0 Simplified with AutoRoute.
What is 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.
Why AutoRoute?
If you want to use named/generated routes inside of your App 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.
Books App Using AutoRoute
To demonstrate how AutoRoute works we’re going to create a simple Master/details App, it will display a list of books inside of BookListPage, clicking one of the books is going to take us the BookDetailsPage where we can display it’s details and return a random rating upon clicking Rate Book button.
Setting up the Router
Step 1: We Create a placeholder class {AppRouter}, the name can be anything as long as it’s prefixed with $ so the generated class will have the same name minus the $. That’s the class we’re actually going to use.
Step 2: Annotate the router class with MaterialAutoRouter which takes a list of routes as a required argument.
Note: add your pages as Types not instances.
Tip: You can Shorten auto-generated route names from e.g. BookListPageRoute to BookListRoute using the replaceInRouteName argument.
Note: if you don’t specify a path it’s going to be generated from the page name e.g. BookListPage will have ‘book-list-page’ as a path, if initial arg is set to true the path will be ‘/’.
Step 3: run the generatorflutter packages pub run build_runner watch
Step 4: Hook up the generated {AppRouter} with MaterialApp
That was actually it for the setup part.
Navigation
We can navigate by pushing the generated route objects using the scoped router/controller which we can get by calling AutoRouter.of(context) or by using the extension context.router any where beneath the root delegate.
Passing arguments
As you can see from the code below our BookDetailsPage expects an argument of type Book.
wait a minute….
I thought you said our router setup was done? We haven’t handled any arguments yet! That’s because AutoRoute automatically detects and handles your page arguments for your.
Generated Route for BookDetailsPage
Note: Generated routes will respect required arguments and default values.
What’s left to do now is pushing BookDetailsRoute and passing it the selected book as an argument.
First task is done, our App can now navigate to BookDetailsPage passing an argument of type Book.
Returning results
If you can remember in our App preview we could click a button inside of BookDetailsPage and generate a random rating value that’s consumed inside of BookListPage.
To return results we need to define a callback function parameter the same way we define object parameters and call it as we pop the page.
let’s not forget to add the onRateBook callback function as an argument to BookDetailsRoute inside of our BookListPage.
and just like that our App is finally complete.
That was the tip of the ice purge, AutoRoute has a lot more to offer. If this article gets some love 👏 I’ll gladly write more about AutoRoute in future articles.
The complete example on GitHub
You can support the package by liking it on Pub and starring it on GitHub
Thank you all for reaching this far and happy coding.
