Flutter GoRouter Tutorial - Easy Navigation Tutorial using GoRouter

in today's video I'm going to be showing you guys how to implement the go router package within your flutter application this package is a very powerful routing mechanism for your flutter application and in this video you're going to learn everything about it we're going to be building an application where we're going to be seeing the login page appear to us as soon as we start our application and then if you click on the signin button we are going to be directed to our homepage where we'll have the ability as the user to either go to the profile page by clicking on the profile button and then navigating back or to the actual pricing page where we're going to be seeing an actual pricing card and all of this functionality we're going to be achieving by using the go router package and we're going to be building it in a way that I'm going to be showing you all of the core features that you need to understand about gouter such as how to set it up and how to pass arguments whether they are objects or path parameters or cury parameters to these different routes and just as a side note if you are ever interested in implementing deep linking within your flutter application then this router is an excellent thing that you should learn because it's going to allow you to do that as well but we won't be covering that in this video so let's get started so to get started the first thing that you'll have to do is make sure that you have this dependency of go router actually within your application so I'll copy it and then I'll come back and I'll paste that within my pubp back. yaml file making sure that I do command save and that flutter pubget gets called as a side not for the purposes of this tutorial just to build the UI we're also going to be using a very cool package which is called modore UI that's just going to give us some pre-built uis to make our app look pretty so you can install it if you want otherwise it's not necessary for the go router functionality to actually work now that this is done I just like to quickly mention that my application although it has some code within it all of this code are just the code for basically how the different pages within my application should look like and it doesn't have any navigational logic built within them as of now so if you want to take a look at the completed version of the application as well as links to all of the resources that I've used within this video then a link to that will be down in the description below so you can download the source code from there if you're confused at any point so to get started the first thing that we have to do is make sure that our application runs and that there are no issues with it so for that once I made sure that I have the two dependencies added but the only required one is going to be go router I'm going to start debugging my application on the simulator and once the application is actually running on the the simulator then I will resume the video Welcome Back everybody so as you can see now that the application is running on the simulator if I click on the signin page nothing happens for now so we are going to be fixing this now by firstly implementing our G router Router so how can we do that well firstly what we have to do is similar to if you use the vanilla navigation that's baked into flutter we have to Define some routes that our application allows the user to navigate to but the way we do this by using G router is by actually creating a go router object and and that defines all of the navigational links for our application so to do that what I'm going to be doing is in my main. do file I'm going to be creating a variable and it's going to be final of type go router and this type is going to come or this class I should say is going to come from the actual go router package and then I'm going to say this is going to be called underscore router and then I'm going to set this to a new instance of our go router object like so and here as you can see the only required parameter that we have to set are the routes that are going to be within our app application so here what I'm going to be doing is basically defining an actual list and this list is basically going to Define all of the RS that exist within my application I'm also going to make sure to define the type of objects that are going to be within this list and in this case they are going to be route base and then we can just Define our routes so what I'm going to do is Define a route and to define a route you create an object called a go route and in that you define a path and the path basically specifies where this route leads leads us to so in this case my path is going to be and this is just the convention that I like to follow for our actual homepage and that is going to be slome like so and once this is done the next thing that I'm going to be doing is also giving my route a name and the name in this case is going to be slome as well and finally for this actual route to work the last thing that I need to do is Implement a builder function that is going to let the router know how is it going to build this route so to do that we basically Define a builder function and the Builder function takes in two things it takes in a context and a state and then what we have to do is return an actual widget here which basically specify how this route is going to be built so what I'm going to be doing here is returning an instance of my homepage like so and that's pretty much it and then I'll add a const keyword here as well and there we have it that's our basic shell of a router created so now what we have to do is basically take this router and tell our material app that hey you're going to be using this router so to do that what we're going to be doing is coming to our material app and now instead of using the default material app we're going to be using the material app. router Constructor and on that instead of now passing the home property that you usually pass to material app or maybe routes what we're going to be doing is passing a property called router config and we're going to be setting this to our underscore router so now our material app is going to be linked with our actual router and as soon as we do this we're going to see that it's going to give us an exception saying that there are no routes for the location forward slash and the reason we're getting that is because the initial location by default where go router takes us as soon as we launch our application is forward slash and since we haven't defined a route that handles this specific use case that's why we're getting the error so what I want to do is that I want to replicate the logic we had before where when we start up our application I want to take the user to the login page so to do that I firstly need to create a route for our login page as well so to do that I'll just basically copy this go route like so and I'll add it again and this time I'm going to say that the name for the route is going to be slash login the path will be SL login as well and this time instead of returning our homepage I'm going to return my login page and do command save and then finally the last thing that I'm going to do to remove this exception is say that the initial location that we're going to take the user to is going to be for/ login like so to command save and then if I restart my application you can see that the error is gone and now we are displaying the actual login page to our user so now if I click on the signin button still nothing happens so now let's talk about how we can navigate from our login page to our homepage using the go router as well as the route that we are defined so for this to work the first thing I have to do is go to my login page so I'll come to my login page and within my login page there is a call Bear function that is going to be called when the user clicks on the sign-in button and it's specified here called on sign and pressed so here what I'd like to do is basically run the logic that's going to take the user from our actual login page to our homepage so to do this it's going to be pretty simple all we're going to do is access the context object which we have access to and then on that I'm going to call a function called go named and this is going to come from the package go router and then here we're going to specify the name for our route which in this case is going to be for slome and do command save and since my route doesn't require any additional parameters or anything like that that's why we're not passing them here but later on in the tutorial we'll also take a look at that so with this done if I click on sign in you're going to see that it immediately takes me to the homepage and now I can see my homepage and the reason we use go named instead of let's just say push something is because I do not want the user to have the ability to go back to the login page once they've successfully signed in so to completely replace the login screen on my my navigation stack with the home screen I'm using the go named function and then we'll take a look at push examples later on but this is basically the Crux of how everything is working as of now so with this done now what we have to do is implement the actual functionality for navigating to the profile page and the pricing page so let's firstly talk about how can we navigate to our actual profile page so if I take a look at the definition for a profile page I can see that when the profile page gets constructed it needs to have an actual user pass to it and this is basically a class that I've created by myself where we need to Define three things which is what the name of the user is the image URL and the rule and then this is the information that the profile page is actually going to use to build itself so how can we pass custom objects to a specific route using go rouer well it's going to be fairly simple to do so the first thing that we have to do is that we have to define a route to our profile page so let's do that so to do that I will come back to my router's definition I'm going to copy this go out and I'm going to paste it again like so and this time what I'm going to do is I'm going to say that we're going to go to slash profile and then the path is also going to be slash profile and then my profile page is going to be the thing that is going to be returned by the Builder now my profile page as you can see tells me that it expects a named parameter user that need gets that needs to get passed to it so let's define the user so where do we get this user from well what's basically going to happen is that we're going to call some kind of a function on our actual context and then through that we're going to get the user passed to us and then once we get that user we can actually pass it to our profile page so what's basically going to happen here is that I'm going to say that on the state there're going to be a property called extra and this extra property is what we'll pass when we actually want to navigate to the profile page and it's going to be a user object and then we can pass this to the actual profile page so what I'm going to do here is that I'm going to say that I will create a variable final type user called user and set that equal to state. extra and let's import our user model as well and then what I'm going to do is cast the state. extra as a user to remove the error and then what I'll do is that I'll say that I'll pass this user to our profile page and there we have it that's pretty much all we had to do so now I can remove the const key here because it's no longer going to be a widget and that's pretty much all we had to do so now what we have to do is that when we actually want to navigate to this route we have to basically pass the user within the extra property for the state so let's go to our homepage and let's implement the navigation logic here so on my homepage what I basically want to do is that when the button gets clicked for my profile which is this purple colored button I want to go to my profile we've already defined the route and within the route we have specified that the extra property needs to have a user that needs to get passed to it so now what I'll do is that I will say that context Dot and in this time instead of doing go named I'm going to do push named and what push name is going to allow us to do is actually push the screen that we basically want to navigate to On Top of the current existing screen so we'll have the ability to navigate back to the screen that we came from and that's the reason we're using push named so the actual name for the actual endpoint will be for/ Prof file and that's pretty much all we have to do but this time I'm going to specify the extra parameter on the push named function and this is going to be the user object so let's do that and there we have it now we're passing a user object and now what I have to do is Define a name for the user so let's do Denzel Washington as the name and then the role could be actor like so and then finally the image URL is just going to be an image URL that I grabbed off of the internet so let me just add that and there we have it now we specified all of the information for the user so with this done if I click on profile you're going to see that it's going to take me nowhere and the reason for that is because we need to restart our application for this to actually work I believe so once the application is restarted let's click on sign in profile and there we have it we're taken to the profile page and because we used push name we have the ability within our AB bar to actually go back to the page that we came from and the information that we wanted to display is being displayed on the profile page for the user object that gets passed here so now for example if I change the role from actor to musician and if I go on profile you're going to see that now it's showing me musician as the role for Denzel Washington let's change it back to actor before Denzel Washington comes knocking at my door and restart the application and now if I click sign in profile everything seems to be working so the last thing that I want to talk about is how we can also pass some path parameters as well as C parameters to a navigation route using G router so how do we do that well to do that what I have done is that basically I've within my pricing page if you go to that implemented the mechanism that when the pricing page is constructed we need to pass it an argument which is the amount that's going to be showed on the pricing page so this amount needs to be passed when we navigate to the page and we're going to be achieving this by using something known as path parameters so how do we do that well first things first the first thing we have to do is in the spirit of how we Define routes and go router Define a route so I will come back to my router and I will copy this go route and I will paste it again and this time I'm going to say that we will have the ability to go to our pricing page and to go to our pricing page what I'm going to be doing is basically saying we will have the name pricing and then the actual path that we will go to is going to be pricing p r i c i n g for Slash and then there's going to be a actual parameter that needs to be passed which is going to be dynamic within this route that then is going to be passed to the actual widget so how do we Define these Dynamic parameters well it needs to be these two colons I forgot what the name of those are um and then after this you basically Define the name for the actual parameter so in my case I will say it's going to be price so our route is going to be forward slash pricing forward slash and then whatever the price is and then we'll pass this price to the actual page so now within the Builder I'm going to remove returning a profile page and instead of this I will say that we will returning a pricing page and then it requires an amount that needs to get passed to us to access the amount what I'll do is that I will say that I'll create a variable final double I'll call this amount and I'll set this equal to State DOT and then on the state object we basically have a property called path parameters and this is a map and a map basically means a key value Pairs and we can access the actual price here that gets passed when we are navigating to this specific route so here the key is going to be the same that we've specified here in our case that's going to be price and let's do that but all of the path parameters by default are of type string optional so what we need to do is cast this as a double because our pricing page expects a double amount that needs to get passed to it so to do that what I'm going to do is do double. parse like so and then I'm going to do state. path parameters and add the remaining bracket here and I'm also going to add an exclamation mark here uh just to remove the error and there we have it that's pretty much all we had to do so now to navigate to our pricing page and actually pass a price firstly I need to go to the place where I want to call my navigational logic so in this case that will be the homepage and then I will come to the material button responsible for taking us to our pricing page and here what I'm going to be doing doing is doing context Dot and then I am going to basically say that we are going to be doing push named and push named is going to expect me to then again pass it the name of the actual Endo that I want to go to so in this case that's going to be pricing like so and then finally I also need to define the path parameters so for the path parameters here I'm going to define a map where the actual key is going to be of type string so in this case need this so in this case this needs to correspond to the key that we are expecting so in my case I had said that it's going to be price like so and then the price here is also going to be a string so I'll do 99.99 let's just say and then with this done I will do command save restart my application just to make sure that all of the changes take effect click on sign in and now if I click on pricing it's going to take me to the pricing page and I'll have the ability to go back as well and I can see that it tells me that the price is $99.99 per year now if I change this to let's just say for example 3872 let's just say and I go back and I come back to the pricing page you can say that now it says 38.7 so there you have it people that's pretty much it for today's tutorial I hope that you learned a thing or two about how to get going with the G router package and this is an excellent routing package that you can Implement in your own flutter projects and I implement it in a ton of different flutter projects that I create so with this set stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 2,263

Keywords: flutter go router tutorial, flutter go router, gorouter flutter, gorouter flutter tutorial, go router redirect, flutter navigation tutorial, flutter go route example, flutter go_route, flutter go_route tutorial, flutter routing and navigation, flutter navigation, flutter tutorial, gorouter go vs push, gorouter params, flutter gorouter back, flutter gorouter example, flutter gorouter bloc, flutter gorouter params, flutter gorouter pop, flutter route navigation, flutter route

Id: h_zfsFKm5MY

Length: 17min 37sec (1057 seconds)

Published: Mon Mar 11 2024