View profile

Flutter Fast, Flutter Far - Issue #4

Joseph Muller
Joseph Muller
Hey! Don’t go there! An intro to Route Guards in Flutter

Navigation in a mobile app is a bit more involved than pushing a route here and popping a route there. Some routes should only be viewed by a user who is authenticated while others are available to the public. Some routes will only behave and display properly if the user has an active internet connection while others show static assets that never change.
Is it possible to verify these requirements are met before loading each new route? With Route Guards, anything is possible.
Route Guards
Route Guards were first introduced in the Angular programming language as interfaces used to control the accessibility of a route based on a given condition. This Angular feature set included methods for monitoring forward and backward navigation, as well as processing the data that was sent from one route to another. As the name indicates, guards would sit between routes and determine if navigation between the two was allowed.
The problem is that Flutter doesn’t provide built-in support for guards so a lot of the navigation-validation-leg-work has to be done inside your route code. For example, you can perform a check in the initialization method of your route to determine if the route should actually be rendered. Or, you could wrap your view in a FutureBuilder and perform your check there. Either way, you would still be pushing the requested route onto your navigation stack which is not ideal.
Auto Route Guards
Luckily, the auto_route package on pub.dev exists. Aside from being a full-fledged navigation solution that makes passing arguments, naming routes, and implementing nested navigation a breeze, it offers support for route guards.
auto_route 2.4.2
You can read more about the actual implementation in the link above, but to summarize, you can extend the AutoRouteGuard class to perform any kind of navigation check you can think of. Each guard class can be used on as many routes as you like and to make the deal even sweeter, each route in your navigation tree can use multiple guards. Below, I’ve shared a few of the guards I’ve created.
Firebase Authentication Guard
Joe Muller 💙
Not sure if I shared this already but using route guards in auto_route, you can prevent a user from seeing a screen if they aren't authenticated.

#flutter #firebase #android #ios #firestore #saas #mobile #dev

https://t.co/8bJjrCMiZF
At Protocol Authentication Guard
Joe Muller 💙
For users of the At Platform, here's the equivalent. The idea is to check the AtClientManager for the current at sign.

Note that this won't work with the current at_client_mobile. Working on a PR...

@atsigncompany

https://t.co/4VufZinQGC
Connectivity Guard
Joe Muller 💙
I'm using the auto_route package for all things navigation. The connectivity check is performed by the connectivity_plus package by the @FlutterComm.

https://t.co/zjPCJaPZVn
Time of Day Guard
Joe Muller 💙
Here's one last route guard for all you #Flutter folks.

You can prevent a user from accessing a certain route based on the time of day. I based this one on @tacobell's #HappyHour -->

https://t.co/RbRdCMXlRD
Navigate Carefully
It should be clear by now that route guarding is potentially very powerful. With a few extra lines of code you can protect user information and avoid making database calls without an internet connection. Certain checks, like checking for an authenticated user or an active network connection, are ideal because they can be made quickly without the user noticing.
That said, route guarding isn’t perfect for all situations. Because the guard logic is executed before the next route is added, you want to avoid making calls that can take a noticeable amount of time to complete…otherwise the user will experience latency. If the delay is long enough, they’ll actually be able to continue using the app between the time the navigation was requested and when it’s performed.
Support Me
If you found this newsletter helpful, consider supporting me on BMAC or GitHub! I’m aiming to send one 2-3 minute newsletter a week to help you become a better Flutter developer.
Joseph Muller is developing Flutter apps for 2021
Sponsor @jtmuller5 on GitHub Sponsors · GitHub
Did you enjoy this issue? Yes No
Joseph Muller
Joseph Muller @mullr33

The successful software development companies of the future will be the fastest.

Once a week, I'll dive into something related to coding efficiency, project management, or feature implementation.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.