Mastering GoRouter Redirect in Flutter: Auth Flow Tutorial

hey guys welcome to jobotech channel in today's video we're going to explore how to use go router's redirect feature to guide users to the appropriate screens after logging in or signing out we currently have a Firebase phone node here that we have developed in our fast videos and here is the architectural diagram of our phone node which I have explained in my last video about flutter phone hot architecture the link to the video is in the description below if you're not familiar with it what we've done here is to create a landing page where we listen to the Old State changes and redirect the user to the sunscreen or home screen depending on the value of the Old State changes this works as intended but what if we want to use go router package to handle our app's routing system and what if we want to verify certain conditions first before redirecting the user to home screen for example we only redirect users to home screen when they have registered the display name otherwise we'll guide them to the name registration screen these are the most common challenges that we want to address by introducing go router in its redirect feature into our app so our goal here is to create a routing system for our app using go router package and utilize the redirect feature to redirect users to the correct screen when certain conditions are met so the first thing we need to do is to add go router in our perspect.yaml file and then construct our routing system using it and take note that we'll be using riverpad as our state management solution here so if you're not familiar with it I have a video on how to use River path providers I will add the links in the description below so let's go ahead and add go router into our app encode our routing system foreign foreign guys we now have our routing system in place so what we're going to do next is to create the redirect functionality of our road flow because as you can see after we log in we are stuck here on the sign-in screen because our routing system doesn't know what to do after we log in so what we're gonna do is to give our routing system an instruction on what to do after we sign in and after we log out and the way to do that is to use this redirect method of go router so let's go ahead and create this redirect method in another file okay foreign but before this redirect method can be called I'll go router needs to listen to a certain state so that it knows when to invoke the redirect method so how does this work in the previous implementation of our authentication we have a landing page that is listening to the Old State changes and return sign in screen or home screen depending on the value of the Old State changes this concept is similar to what we're trying to achieve we can also let our go router listen to those State changes so that when there is a changes to the value of the oath the redirect method will get cold but what if we don't want to run a redirect method immediately perhaps because we still have to process something like saving data to our database before redirecting the user this is now where we need to create a class that will function as a detector and transmitter to the refresh listenable of our go router let's call it app router listenable but looking at our current workflow diagram where should we position our app router listenable class when should our transmitter send a signal to our listener well obviously after all processing is done so positioning between these oath repository class inside in service class isn't ideal because as explained in my previous video this sign-in service class is our backstage manager that communicates to various repositories in service classes after signing into our Earth repository it may still interact with the firestore service to update something or engage to other classes for various reasons so obviously after finishing all its tasks and returning the final result of his job that's what we need to listen to to determine success or failure so we will position our app router listenable between sign in service class and sign in screen controller class this is now the diagram of what we are aiming to achieve take note that this can be improved especially when your app grows and needs more space but with the requirement of our app this is already good enough as you can see this is our app router system that uses go router package and encapsulates all our routes this centralized routing system is advantageous because if you encounter a problem with routing you already know where to fix it as they are all contained in one place and here is the go router's refresh listenable that is listening to the up router listenable class and triggers the go router's redirect when it receives a signal after that this redirect will now process the logic that was written inside and return the correct screen based on the result it processed so I hope this flow is clear please comment down below if there are any confusions and for season developers watching I'd love to hear from you guys how do you handle routing in your projects do you have any additional tips or optimization to suggest for this setup let's have a discussion in the comments below your insights could help a lot of Developers and with all that said let's go to our Theory to see if it all works foreign foreign take note that to make this glass able to transmit the signal to its listener we need to extend the change Notifier because our listener is expecting a type of listenable and change Notifier has extended this listenable class so we know that we are in good hands all right we already have our at least enable class in place and what this does is only to give a signal to our listener when login or sign out is successful so make sure you shouldn't be adding any additional logic here so that you won't be violating the single responsibility principle we also have set our listener here and here in our redirect method what we're doing is checking if the current user is null then return sign in screen if the user is signed in we further check if they have a display name if they do then return home screen otherwise we return name registration screen so that's it with all the codes that we have written guys let's go ahead and test our app if it's working as expected there you go we are correctly redirected to the name registration screen because our user account doesn't have any name at the moment so let's go ahead and register a name sign out our account and try to sign in one more time to see if we will be redirected straight to the home screen there you go everything works as expected that's it for this video guys we've successfully implemented go router's redirect feature in our platter application this not only simplifies our navigation logic but also makes our code cleaner and easier to manage with this setup we can now gracefully handle user authentication and direct our users to the appropriate screens based on their old status and additional conditions such as the presence of a display name its powerful tool that can significantly enhance the user experience in your flatter apps thank you so much for tuning in guys if this video helped you out please give it a big thumbs up share it with your fellow platter Enthusiast and don't forget to hit the Subscribe button for more awesome content

Channel: JOBERTECH

Views: 3,679

Keywords: flutter, flutter tutorials, flutter tips, flutter development, flutter ui design, flutter ui, flutter widgets, mobile app development, code guide, flutter tips & tricks, joberTech, JoberTech, JOBERTECH Flutter, Flutter Tutorials, Mobile App Development, Coding Guide, Flutter UI Design, Flutter UI, Flutter Widgets, Flutter Tips & Tricks, GoRouter, go_router, firebase auth, firebase authentication

Id: TSr6LwKn9zA

Length: 15min 58sec (958 seconds)

Published: Sat Aug 19 2023