The Ultimate Flutter Navigator 2.0 series using Auto Route in Flutter Part:2

In the first part, you learned about how you can set up the auto_route package in Flutter.

If you still not have completed the first part, then I would suggest you to read it first, because it contains the whole setup process of using Auto Route in Flutter.

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

In this part of the Auto Route series, We’re gonna cover these topics:

1. Passing the data between the screens
2. Redirect routes
3. Page Transitions
4. Navigation Bar implementation

1. Passing the data between the screens

To pass the data using Auto route, you just have to add your parameters in the routes.dart file and Auto route will automatically detect the arguments for you and it will generate the code according to that.

You can pass the data in 2 ways using auto_route:

1. Path Parameters
2. Query Parameters

1. Path Parameters

You can share data between the screens using path parameters by following these steps:

Step — 1:

Create a file named router.dart in your root directory and add the following code to it:

• Notice in the second route, we’re defining the path variable as /:id. Note that we’re not specifying any data type of the path variable here.

Step — 2

• Now let’s see the code of the BookListPage

• In the BookListPage, we’ve to define path parameters by annotating the variable with @PathParam(“name”), where the name is the variable name that we gave in routes.dart file.

Step — 3

Run this command in the terminal to generate the necessary code:

flutter pub run build_runner build --delete-conflicting-outputs

Step — 4

• Now, whenever you want to navigate to BookListPage, you have to supply the id parameter. Otherwise, it will give you compile time errors so that you can know that you’re missing the parameter’s value.
• Here’s the code for navigating from HomeScreen to the BookList Screen.

2. Query Parameters

Sometimes, you don’t require some parameters to be necessary, that’s when you can use query parameters to pass data.

In this example, we will show Parameter found if we are passing query parameters and we will show Parameter not found if we are not passing any query parameters.

Step — 1

• In the BookListPage file, add one parameter called isNameShow and set it to false by default.
• Here’s the code for it:

Step — 2

• Now run the command in the terminal to generate the code for it.

flutter pub run build_runner build --delete-conflicting-outputs

Step — 3

• Now you can pass the arguments as you’ve passed in the path parameters.

• Notice that unlike path parameters, you can choose not to pass any parameters and it won’t throw any error.
• You can also run the same App in the browser and it should work completely fine. You can also change the value of the parameters from the URL itself if you’re running the app on the browser.

Redirecting screens

This feature is so useful for the browser because sometimes users can enter the wrong URL. In that case, Auto route gives you the functionality to redirect your routes based on URL.

In this example, we’ll show the HomeScreen when users open the app or someone enters /home in the URL.

You can perform redirection of the routes in 2 ways:

1. Using RedirectRoute

Step — 1

• Add RedirectRoute in the router.dart as shown below:

Step — 2

• You should be familiar of this by now😉

flutter pub run build_runner build --delete-conflicting-outputs

Step — 3

• Now run the code in the browser.
• Try to add /home in the URL and press enter. It will always redirect you to the HomePage.😃

2. Using WildCards

AutoRoute also supports wildcard matching to handle invalid or undefined paths.

In this example, we will show HomePage whenever a user tries to enter /home/* where * can be literally anything🤯. Let’s see it in action.

Step — 1

• Modify the routes.dart file like this:

Step — 2

• Generate the routes. (You know the command😉)

flutter pub run build_runner build --delete-conflicting-outputs

Step — 3

• Run the app in the browser and try to enter home/anything in the browser, it will always redirect you to the HomePage.

Tip: You can also redirect the routes to the other screens, i.e whenever user enters the wrong URL, you can show your own 404 not found sceen.

You can find the demo of data passing and redirect screens by the link below:

GitHub — Cavin6080/Auto_route_Demo at part-2/passing-data

3. Page Transitions

By default, Auto route supports the Material and Cupertino page transitions. However, you can also add your own transitions by using CustomRoute class instead of using AutoRoute class.

You can create custom page transitions in 2 ways:

1. By using Auto route’s pre-built transition
2. By creating your own transition

1. Using Auto route’s pre-built transition

Auto route also provides you some pre-built transitions which you can use in your project.

To add a custom transition, follow these steps and modify the code in routes.dart.

Steps

• Replace AutoRoute() with CustomRoute()
• In the transitionBuilder property, add the transition as TransitionBuilders.fooPropery
• Generate the code(Typical BuildRunner command in the terminal)

Here’s an example of that:

2. Create your own custom transition

You can create your own custom transition using the transitionBuilder property that you’ve used in a first way.

But instead of using Auto route’s pre-built transition, you can write your own transition to build your own custom transition.

Here’s the code for that:

You can check out the demo of custom transition by the link below:

GitHub - Cavin6080/Auto_route_Demo at part-2/custom-transition

4. Navigation Bar

Whenever you’re building an App in Flutter, there’s a high chance that you’ll implement some kind of tabs navigation. It could be the Bottom navigation bar, TabBar or PageView.

That’s why AutoRoute provides widgets to implement these kinds of navigations in Flutter.

In this example, we’re gonna create a Bottom Navigation bar in Flutter.

• AutoRoute provides a widget called AutoTabsScaffold , by which we can implement BottomNavigationBar in Flutter.

Step — 1 (Adding the routes)

• Modify your routes.dart file like shown below:

Here we have a few important parameters to talk about.

• children: Whenever you want to implement nested navigation, then you’ve to put all the tabs inside some AutoRoute class’s children property.

Step — 2 (Generating the routes file)

• Generate the routes file using Build runner

Step — 3 (UI)

• HomePage and ProfilePage are just StatelessWidgets with a body of a Center widget and a Text widget inside.
• We will make use of the AutoTabsScaffold widget to create the UI with BottomNavigationBar. Here’s the code for it:

• Here, in the AutoTabsScaffold, we’ve to define the list of routes that will be in our BottomNavigationBar.

If you want to implement PageView or TabBar then Auto Route also provides the widgets for it named as AutoTabsRoutes.pageview() and AutoTabsRouter.tabBar()

You can check the the demo of Bottom navigation bar by the link below:

GitHub - Cavin6080/Auto_route_Demo at part-2/bottom-navigation

I hope that I managed to give you some insights about Auto route while keeping the blog as much simple as I can.

In the next part, we will cover some more advanced topics of Auto route like Declarative routing, nested routing, route guards and many more other things.

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