The Ultimate Flutter Navigator 2.0 Series Using Auto Route Part:1

If you are developing apps with Flutter for some time then there’s a great chance that you have heard about Navigator 2.0 aka a new way of navigating in Flutter. But still, so many people are using Navigator 1.0 in their Flutter apps.

So the question arises, do you actually need to use Navigator 2.0? If yes, then why should you use it?

To answer this question, first let’s understand what is the difference between Navigator 1.0 and 2.0 and why so many people are still using Navigator 1.0.

Why did we need Navigator 2.0?

• We were all used to doing navigation using push and pop in Flutter. And everything was working pretty fine without any issues.
• But the issues started to happen when Flutter was not only limited to mobile apps.

• In the web version, we need to maintain the stack of history which by using the current Navigator APIs, was either not possible or you would have a lot of work to do to make it correct.

Also, there were some other flows of Navigator 1.0, such as:

• Navigator 1.0 uses an imperative way, now what is an imperative way you might ask. It basically means that you’ve to define what you want to do and how to do it.
• There is no good way to navigate through multiple routes.
• That’s why Flutter released a new document that mentioned Navigator 2.0 aimed to

Introduce a declarative API to set the history stack of the Navigator and a new Router widget to configure the Navigator based on app state and system events.

What are the problems that Navigator 2.0 solves?

Navigator 2.0 was there to solve all the problems that Navigator 1.0 had. Like:

• It provided developers the ability to define routes declarative way instead of imperative way.
• It provides the ability to modify the whole stack of routes freely, which means instead of just adding and removing new routes from the top of the navigation stack that you used to in Navigator 1.0, developers were able to control the whole stack of routes.
• It solved the routing issues which Flutter developers had with the Flutter web.
• It’s also backwards compatible with Naviagtor 1.0, which means developers can still use the old push and pop APIs along with new Router APIs which were provided by Naviagator 2.0.

Why we’re still using Navigator 1.0 then?

If Navigator 2.0 fixes the problems that were with Navigator 1.0, then why were many people not using it? 🤔

• The biggest reason in my opinion is it was quite a complex thing to understand and the document itself is too big to understand.
• The code we need to write to set up Navigator 2.0 is a lot compared to what we previously were used to.

That’s when folks like us started to make new packages for Navigator 2.0 so that we can use Navigator 2.0 with ease.

So that’s why it was one of the most controversial APIs. Therefore the Flutter team even started API usability research!

As of now, we’ve got so many new packages of Navigator 2.0, that we can utilize to make a developer's life a lot easier to implement Navigator 2.0.

Series intro

I am starting a series on the auto_route package. Which is easier to learn and it also comes with a lot of good features.😉 It helps developers to use Naviagator 2.0 easily in a declarative way!

This is the Part 1 of the series where We’ll be looking into the features of Auto route along with the whole setup process.

So without further ado, let’s get started!

Functionalities Auto Route Provides:

Auto route provides so many functionalities by default that developers can take leverage of. Some of the functionalities are:

• Named Routes
• Path Parameters and Wildcard Matching
• Nested Routes and Routers
• Customizable Route Transitions
• Deep Linking
• Route Guards
• Easy Bottom Navigation Bar Routing
• Declarative Routing
• Flow Routing

The best thing I like about this package is it generates the boilerplate code for us and we can customize everything the way we want to.

Now, let’s set it up so that we can use it in our Flutter projects.

Setting up Auto Route

Step - 1

• Add these dependencies in your pubspec.yaml.

Step — 2

• Create a file named router.dart in your root directory and define your routes like this:

Here we’ve some new characters to talk about:

• defaultRouteType => You have to override this method to tell Auto Route if you want to use material style navigation or iOS style.
• AutoRoute => It’s a class in which you can define the path and other arguments which we’ll talk about later. As of now, we are passing the path:’/’ which indicated that HomePage should be our first Screen when we start the app.
• Here we’ve 3 screens: HomePage, BookListPage and BookDetailsPage. They all are only StatelessWidgets with an Elevated button in the center so that later we can use that for the navigation.
• class $AppRouter => When we generate the routes, it will be generated in a separate file and it will extend this file in which we have defined the routes.
• Annotate your screens with @RoutePage() like this:

@RoutePage()    
class HomeScreen extends StatefulWidget {} 

This will allow the code generation tool for generating the code for the screen.

Step — 3

• Now run this command in the terminal, it will generate all the routing code for you.

flutter pub run build_runner build - delete-conflicting-outputs

Step — 4

• Now that you’ve done setting up the routes. You’ve to make a few changes in MaterialApp like shown below:

• First, we’re creating an instance of AppRouter which is Provided by AutoRoute.
• Then we’re replacing the MaterialApp with MaterialApp.router which indicates that we’re using Navigator 2.0
• Then we are adding routerDelegate and routeInformationParser, but you don’t have to worry about that since auto route would’ve generated the code for you.😉

Now, our setup is finally done.

Note: If you’re stuck at any step in this, you can always look into my GitHub Repo. It has all the necessary code in it. You can fork this repo and then run it in your local machine.

If you’ve followed the steps correctly, your output should look similar to this:

Now comes the most interesting part, The actual Navigation.

Navigating between different screens

• Auto Route provides extension methods so that we can easily navigate between the screens.
• To navigate from one screen to another screens, you can just write context.pushRoute(RouteName)
• For example, if you want to go from HomeScreen to BookList screen, you can write:

context.pushRoute(BookListRoute())

• To go back, you can use context.popRoute()
• The auto route gives you all the similar methods that you’ve used in Navigator 1.0 but the twist is now you’ll be using Navigator 2.0 with so many additional features.

You can also try to run the project in the browser and it will be working as you’ve expected. 😉

So this was the first part where you learned how you can setup auto-route and how can you navigate between different screens.

This part was for the general introduction of Navigator 2.0 and auto route package. In the upcoming parts, we’ll be covering all the basic and advanced navigation topics. I have written part 1 so that you can know why do we actually need auto route and how can we do the basic setup and navigation.

In the next part, we will cover passing data between routes, nested routing, some widgets that are provided by auto route and many more topics!

• If you want to check out the source code then you can fork my GitHub repo and check it out. Here’s the link:

GitHub — Cavin6080/Auto_route_Demo

Keep clapping 👏 (you can appreciate it by clapping 50 times)

You can connect with me on LinkedIn, Twitter and don’t forget to follow me here for more updates.

Note: We are building a community for Flutter Developers where anyone can share their ideas or content, ask doubts about Flutter/other tech and collaborate with each other. If you are interested in being part of this then you can join our discord server by this link: https://7span.in/club