Flutter Navigator 2.0 Tutorial for Beginners - Go Router

YouTube generates different parts for different videos channels and playlists this allows the user to share links and open a particular web page without going through the hassle of searching Have You Ever Wanted such a thing in your flutter app then go router package is exactly what you need it's a very simple solution to what could have been a very complex topic to get started head to pub.dev install go router and launch your app on Chrome to see the linking capabilities in my project I have five screens the user screen when any of the buttons are clicked over here it will navigate to the particular screen in case of user profile it will land to the user profile screen which takes ID from The Constructor in case of user product screen we will have product details which is of the type map the login screen which is to be shown only when the user is not authenticated and if the user is authenticated they need to see the home screen as of now the home screen shows up by default so we need to add that navigation as well the first thing we need to do is create an instance of the Google router class so we will create a separate file in lib folder and then we'll create a class for this router but since a router class already exists in go router we are going to call it app router then we will create instance of the go router class we'll call this router and it requires a list of Route bases to be passed in so we'll put an empty list for now in the list we are going to pass in something known as go route and the first thing we need to pass in is the path path is the information that shows up right after the domain name so the first route in our app is going to be slash we use the go route class here instead of route based class because routebase is an abstract class go route inherits from that abstract class we saw the Path property the next property is the page builder property so our app knows that on this particular path we need to do something but we have not mentioned what we need to do that is exactly what page builder will do for us within this function we need to return material page and in the child we we will have the screen that we want to return so our screen is going to be home screen and since it doesn't require anything from the Constructor we can just mark it as constant to see this in action we need to go to the main.dot file replace material app with materialab DOT router now the home property is not there instead we have two more properties that we need to add route information passer and Route delegate creating these classes from scratch is very difficult but go router gives access to these variables so we just need to create instance of the app router class we just created then access the router property on it and then we can access the route information password similarly we are going to do for router delegate now we just need to restart the app and the home screen shows as it is no change yet because it's just the slash part and that's exactly what happens when we don't add any routing in our application so let's add another route that will be the login path and it will return the login screen and just go to login path you'll see login as encouraging shows up but still whenever we restart our application home screen is the screen that shows up to change that in the go router class there is a property of redirect and with this redirect property we get access to context which is build context and state using which we can check if the user is authenticated we will go to the home page otherwise the login screen so we can create a variable called is authenticated let's just say it is set to false this variable is just a demonstration of a value that you could have gotten from a server because this function can be marked asynchronous and you can make all the HTTP requests or the Firebase calls you want and get access to the is authenticated property I've created this just for demonstration here we'll check if the user is not authenticated then we want to return login screen otherwise we have to return null returning null means that the user will go to the route they've passed in and they're not going to be redirected by any means we are getting dead code warning over here because our compiler knows we have created this is authenticated variable and given a value to it but if you get it from a server we don't know the value and because of that we won't get this dead code problem however if you don't like this you can always ignore that code but when you restart the application you see page not found in the if condition what we need to do is make use of this state and check if state.sub location equal to slash this means when the user first appears on the screen we need to check if they are authenticated and if they are not authenticated then we are going to return the login route otherwise they can go wherever they want now if we restart our application and go to the slash route we come back to the login route automatically now if we change this property to true that means the user is authenticated then we go to the home screen you can do this to restrict some functionalities in the application from the user for example an admin route authenticated user route a moderator route having that much knowledge you'll notice slash login is not a good way of handling here because if we have hundreds of routes in our application it will get a lot messy so in our lab folder we can create a route constants file then create a class out of this and Define some routes over here the first route is for user second one is for user profile third one is for you the product then we have the Home Route and then the login route then we can come to the router.dot file and your pass in the name and the first name is going to be routeconstance dot home we'll pass in a name property here as well which will be routeconstance Dot Login and here instead of manually typing slash login what we can do is state DOT name location and then just pass in route constants Dot Login once you restart the application there should be no changes the only difference is the bigger code you might think but this is very efficient because if we forget the name of our path and mistype a path it will be dangerous for our whole application now let's create other routes so our next route is the user route so we'll just have a slash user and we'll call this user and whenever this is called we want to go to the user screen now what I want is whenever I click on this button I want to go to the slash user path to do that we'll go to the home screen where this button lies make sure to import go router from here if you don't import it you won't get access to the properties on build context which is context.push or context.go or context.replace so these are the three properties context.push is the first one so if you do context dot push you need to pass in the name of a route which is slash user and then start and then when we click over here we navigate to the user screen to make use of these named routes what we can do is context dot push named and then pass in dot user and when we click over here it works as it is let's work on the cancel button first of all so I can go to the user screen again import go router and here just have context dot pop just like a normal Navigator now if I click over here it goes off to the previous route but the problem we'll encounter is when we refresh the application and then click on cancel you can see this button doesn't work anymore the reason for that is we don't have anything to pop we directly landed on this route so I would not use this instead I would use the replace route or replace named however you like it and when you do that having that now we want to work on user profile because user profile is not as easy as it seems we want to go to this profile which can be with this ID go to the router.dot create a new route for it call this user profile but instead of having just this much I'm going to have slash colon ID and this can be named as user profile having that much done you can come over here and return profile screen and here we need to pass in an ID that is what state does for US state gives us access to params parents is a map and it will give us whatever data is passed to this path as a parameter or it is passed from our navigation when we add the params property which we'll see just in a while we can just have ID passed in over here and it cannot be nullable and no more a constant so whatever you pass in over here with the colon it will identify it in the map if you don't add colon it will not identify this because it will think this is a static route but if you want Dynamic route we will just have a colon with the name of the property let's say we try to directly go there so we have slash user slash profile and then we pass in some ID so it displays right here and we go to the particular screen to make the same thing possible over here when we click on this button we need to go to the on pressed here have context dot push named and then we'll pass in the name as routeconstance dot user profile but that's not enough because if you do that it won't work the reason for that we need to pass in the parameter as well but here I also need to mention param's property the first param that I want to add is ID and make sure it is of the type string and string it cannot be an integer or anything else and then click on user profile it works then we have the user product so we'll again create a route for it in a router but this time the name will be user product this will be user products at a particular ID here we will also return user product screen but instead of passing in ID we will have product details well we can make use of query params for this if you want to extract and then use it of course you can do it right here on the user screen we can again have context dot push named and then we'll pass in route constants dot user product then we will pass in our params our parents is a simple ID so similar to params we love query params and then we'll pass in the particular details so you can pass all the properties that you want and then when you click over here you can see we navigate to the screen last part that's needed is what if we land on some other screen for example this screen and it doesn't even exist in our app and if you want to show a custom error page you can do that as well simply go to router here you will have a property of error Page Builder and here you can do whatever you want so I'll just return a material page you see error 404 page which is your custom error page one important thing before ending this video is that this redirect route runs whenever the route changes so it would be really helpful if you don't want to add API calls or Firebase calls over here because that would take your app a lot of time to load instead what you can do is import them from the Constructor and do them all of those tasks in main.dot file if you like such topics or want to create projects with these tools subscribe to the channel thank you so much for watching see you in the next video

Channel: Rivaan Ranawat

Views: 18,085

Keywords: flutter, navigator, flutter 3, navigator 2.0, go router, flutter tutorial, flutter tutorial for beginners, flutter go router, flutter complex routing, flutter routing, flutter navigator tutorial, flutter navigation tutorial, tutorial, free

Id: BgcXHA3EHJU

Length: 11min 28sec (688 seconds)

Published: Fri Nov 04 2022