Flutter GoRouter | Become Pro of Route Navigation in Flutter | Page Navigation in Flutter

foreign [Music] welcome back to a new video and in this video we are going to learn go router so the concept is not very unique the concept is navigation only how we navigate in flutter from one page on the page but there is more convenient way of doing it using go router and there are certain application advantages significances of using go router than normal custom navigation that we used to use like when we want to go from one page to another we use navigator.push or navigator.pushnamed push replacement push replacement and remove until something like that we used to use right or you want you can use name routers also but in flutter 3 uh A New Concept called go router is introduced which is more convenient way of providing navigations in your app then it also helps in deep linking URL based navigation is there using deep linking sorry using go router so whether you want to go from let's say you want to go from about us page and you want to go to contact us page or to any page so you can just pass the uh like route name and you can just hit enter and you will be on that page so it really helps in deep linking when you're implementing deep linking in your applications or when you are making a flutter web application that time also this can really help so I think without wasting more time uh we should start exploring this amazing flutter package right so first of all what I'm going to do is this is a simple application right you can see my project structure there is no rocket science right over here I haven't done anything it's just a simple counter application that you get when you create a new application right now what I'm going to do is in the slip folder I'm going to create one more folder called project right and in this project we are going to maintain our routes right so in this project I am creating one more folder called routes right and in this routes folder I'm going to create two files right so first will be app route configuration so config dot dot right and my second file will be app route constants right so uh okay let's give it the extension dot dot that's it now what what we want to do is in the main.dot you can see that this is my application and let's try to code this also from the scratch itself so first of all I'm going to import material.dot then I'm going to write a void main function which is going to return me a run app and in this run app I'm going to Define my new my app right so this will be my new my app and I'm going to create a stateless widget called my app so till now it's all basic and we can just remove this new and this is all linting that we can take care of later on so in this my app you usually return a material app right so let me return a material app but here is a little bit change that we need to do we don't want to return just a simple material app we are going to return material app dot router also right so in this router you can do everything that you used to do in material app you can Define your theme you can Define anything like you can remove the debug Banner so I'm going to make it false and everything that you used to do in material app you can do over here right now there are two uh like different parameters that you need to pass first is Route information parser and the second one is route uh information router delegate right so these are the two uh new parameters that we need to define whether when we are doing the stuff with go router right so this is all okay let's stop in the main dot over here and let's try to create our configuration so as the name defines we are doing the configuration right so what are we configurating so we are configurating go router with our material app right so over here I'm going to create a class and let's call it my app router right and let's create some things over here right so what all things I need to create over here so first of all it will be go router right I need to define a go router and before that I also need to uh add the go router package in my Pub spec.yaml so I'm going to go over here in the dependencies section uh here are my dependent section I am going to add my go router so that is added and now I can import go router I can write I can give any variable name router and I can create an object of It Go router so we have created an object of this go route and we need to pass some of the parameters right so first is my routes which takes a list so let's say you are trading a website and in any website you know that there is home page contact us page about us page new page Blog Page project page any kind of pages you can put in your website right so this routes list is going to take all the like you can say Links of those pages and those links will be in the form of go route so I need to provide my first go route and this go route I need to provide some of the parameters so first will be name so let's call this one as home right and second parameter will be my path and as you know that home page is just slash because this will be my initial route so just slash and the second one will be my Builder so in this Builder I need to provide a context and state so I am going to provide context contact context and state and I'm going to return a material page so let's return a material page and the child will be my home page right so we haven't created any home page right now so let's go to this lib and let's create a folder called pages and in this Pages I'm going to create home.dart I am going to create about dot dot right okay this went wrong I'm going to create let's say profile dot dot I am going to create contact test dot dot I think these must these many pages are enough so in the home page I'm going to Define a stateless widget and this will be called my home perfect and let's return a scaffold and in the scaffold I am going to Define an app bar app bar and you can Define your body body will have a container container will have a child Center child text and this will be my home that's it right so let me just remove the linting part because I don't want to focus on that so I'm going to comment the analysis options.eml file so this will probably remove all the linting errors that it was showing to me so yes you can see that now I'm going to copy this home. I'm going to go in profile I'm going to paste it contact us paste it about paste it and now I'm going to go in profile I'm going to replace my home with my profile that's it I'm going to do the same thing over here contact us replace about replace that's it now my four pages are ready let's go to our app route configuration and you can see that my home I can import it now that's it and what's the error over here okay so by mistake I wrote go route actually this is a go router class that's it you can see now it's gone so in go router we have routes parameter and this routes parameter takes a list of all the routes that you have defined in your application right so what I'm going to do is I'm going to like add the semicolon so let me yes this is all ready so yes so what we can do is so the error is yes UI defined Builder actually it is Page Builder that's it you can see it's gone so now you can just copy this go route and add it three more times yes so my second path will be profile and this will take slash profile and it the it is going to return the profile page perfect next will be my about slash about will be my path and this will be about next will be my contact us and this will be slash contact us perfect and this will also be contact us right so we have defined all the four parts now right now what we need to do is I'm just going to save it yes and I need to go in main.dot and over here I'm going to create an instance of my goal of my app router configuration that we created over here you can see my app router so I'm just going to copy it I'm going to paste it over here and Dot router we have in that class dot router dot route information parser that's it right and just the same thing I'm going to do over here go router dot router dot router delegate we have router delegate perfect so this is all connected I'm going to just save it just going to refresh it and my first will be my home as you can see it is showing me the first as home because I'm not I have not defined any other path so if I just write about over here and you will see the magic about over here you can see I'm on about route or about page if I am on my slash contact us so I'll be on contact us if I write profile profile I'm on profile page and let's say I go to some route that I have not defined let's say slash user so you can see it definitely it is automatically having a page not found page a default error page and this also you can change let's do that so let's go to app route configuration and then I'm going to tell you what is the significance of this app route constants file right so in this go router uh class only the object only that we have created we need to provide one more parameter right so that is nothing but my error page builder right and I can define a context and state and return a material page and then you can Define your own page that you have defined right so I'm going to go in pages I can write error page dot dot perfect and I can Define uh let's copy this home from here let's paste it over here and I'm going to uh change home to error page that's it let's change it let's go over here let's return error page that's it let's add a semicolon and we are all set right so this was it uh I think we can just refresh it and you can see now error page is also changed right so let's go to our home for now we know that how you can change the default error page so okay not the home it will be just slash and I'm on home right so now what we have done is we have defined all the names over here right but this can be quite difficult if your routes number of routes increasing let's say you have 100 Pages then you don't need to write all the names over here right you can you can have a separate file and you can maintain all the route names in that file right so let's go in app route constants and I'm going to Define a class and I'm going to say it my app route constants perfect and I can have some static values over here you can see I have proud constants and I can say static uh constant string let's say Home Route Home Route name and you can call it as home you can say you can just copy this thing paste it three more times or four more times for the error page also and let's call it about route name you can skip this part if you want but I'm going to show you what I'm doing so that you don't get stuck somewhere and you can have profile route name this will be profile next will be next was error route name this you can call it error and what we created uh about is done profile contact us so contact us perfect contact us route so I can just save it I can just copy this class name I can go over here and I can replace these ones I can just write Home Route name I can do the same thing for this thing dot profile route name dot about route name dot contact us route name right so this is it and no need for error I just created it so no need of error so let's not write it so this is all set and you can see that still if I just refresh it nothing has crashed till now let's verify it so I can write profile I'll be on profile route right so you can see that it's all going above it right everything is below it so it's like a stack you are putting books one over one over another one over another right it's like this and you can finally go to your home route which is your initial route so this was about how you can go to a certain Page by typing the name in the URL box but you know you will not be having this always right you will not always be typing the path manually you will have certain buttons and you would like to go from one page to another page right so let's define some of the buttons on the home page so in the home page I am going to have uh let's wrap this thing with a column and this column will have certain buttons I would say and this button is going to say uh I can Define like this and this will have some text and it is going to take you to about page let me just save it refresh it I can say about page I can have three more buttons about page then I can say profile page then I can say contact us page and finally I can say contact us this is yeah so I need only three buttons so this is all done let's save it let's refresh it about us page profile page and the contact us page now how I can push uh from one page to another page using these buttons right now you can see nothing is happening so in this on press I'm going to say go router go router dot off context Dot push and I can say the location so I can pass the I can write push name basically because we have created we have provided names to our routes so push name and then you can write uh what yeah my app route constants my app route constants dot about route name that is it right you can see what I wrote go router of context dot push name my approve constants dot about route name um about routing yes correct so that's it and this is going to push from home page to your about page right so let's just uh let's just refresh it and you can see that I'm going to about page I can go back and nothing is happening on profile page so now I can just copy this functionality and I can paste it over here I can paste it over here right and I can I can change this to profile route name I can change this to contact us route name let's just save it and let's just refresh it and you can see that if I click on about page I'm going going on about page if I click on profile page profile page contact us page contact us page that's perfect now so this was pretty simple I guess uh nothing more to digest right so yes this is working perfectly so now what I want is I want to pass parameters from one page to another so you know that when you do uh using normal Navigator dot push thing in flutter you can use Constructors to pass values from one page to another page right but how can you pass values using go router right how can you do that so let's do one thing in profile page let's accept a username right so in profile dot dot I'm going to yeah we are going to use Constructors itself but the method will be slightly different right so what I can do is I can accept final string username in profile page and I can create a Constructor for it so that's yes this will be Constructor and now what I can do is you can see an error has appeared on app router config dot dot page that hey profile needs one Constructor but you have not provided it how can we provide that so for that first of all uh if you have already worked with node Express backend or any kind of backend you know that how we pass parameters to the URLs right so to provide a parameter to this profile what we can do is we can provide a parameter like this so write profile slash write a colon and then provide username right so what if I do not write this colon then this will become a path this is again a path right this is not providing a username as a parameter this is a complete path but if you want to provide a parameter you can write like this username so username can be passed to profile page like this so you can write profile needs a username and you can write stack state Dot state DOT parameters at username so where is my username like this username you can write the same name as you have tried it over here I hope this is simple and the error is nothing but it is because of null check we cannot provide a null parameter because my profile page needs it you can remove it but an error will appear how you can remove it you can go to username and you can make this string as nullable then my error will be gone so you can provide a null value to your username but I don't want to provide a null value so I'll go over here and I will remove my uh this thing wrap null wrapper and I can just go over here I can provide a additional check okay so this is all good we can provide username as my parameter now how you can provide username as a parameter let's go to our home page and you can see that uh I'm going to my profile page from this button uh yes profile route name now in this uh push name you can provide parameters right so you can provide parameters you need to provide an object and object you can say username and you can write you can write any name that you want to provide now we are passing parameters to a page using go router right you can see let me just remove this you can see completely how I did go to draw of context.push named we first of all provided the name of that route that is profile route name then we provided parameters as an object username right this is all set so now what we can do is we can go in profile page and we can wrap this container with a column and we can have one more text over here and we can write username perfect now what is the error container okay so let me just cut it out write it over here let's just save it let's just refresh it I can go in profile page and you can see akshit Madan over here right so this works right so now we now we know how you can pass parameters to your objects now how you can pass uh sorry provide parameters to your pages now how you can provide multiple uh parameters so what you can do is you know that you can pass an object right you can pass parameters as an object so what we can do is we can go over here and we can accept multiple parameters right so uh let's take a user ID also so what we can do is over here write slash colon user ID like this and just save it and we can go in profile we can accept one more string called user ID and that can also not be null so let's create a Constructor and over here I can say my user ID is nothing but state DOT params at user ID Android this thing and we can go in home.dart and we can provide one more parameter to my object that will be user ID just take care that you are using the same names and I can provide this as my user ID so let's just save it let's just refresh it and I can go in my profile I can write one more text and I can say user ID let that simple I can just go in my profile let's just refresh it this is not work so let's just go to profile I can see my user id also this was one way of passing multiple parameters right but of course you can create one object let's say Pro final user data this can be an object and this object can have multiple properties and you can directly pass an object that simple right so let's just remove it that you can do it as a homework so I know now you know that how you can pass parameters to your uh like pages right so this was simple using go router now last concept that I want to teach you uh the video is around 30 minutes now let's uh let me teach you that concept also the concept of redirect the concept of redirect so let's say what you want to do is based on certain conditions you want to redirect from one page to another page let's say you went to uh home page and based on a certain condition let's say your app is getting loaded and you have an authentication State because as you know that if in any application if you are authenticated then you can see the dashboard page if you are not authenticated then you directly jump to login or sign up page right so that try to that we can try to clone for profile page because if you are not authenticated then obviously you will not have any profile but if you are authenticated then you can see the profile so let's try to do it so for that thing we are going to use a redirect property that is there in our go router so let's go over here let's try to have redirect and in this redirect we can have a context and state as we have for other go routes and we have a page material pages also right or page Builders also so we have redirect context and state and we can have a certain property that we can take from this my app router so uh that we can provide us final Boolean is auth and we can consider or we can create a Constructor for it right so we created one Constructor and we can wrap this thing we can make it a name route and we can make it required right so now we can apply that property so uh right let's write if is auth uh then I can say uh if is odd then I can return a material page or you can say a name route so context dot named location and you can provide the name as if it's authenticated so that means if I'm authenticated let's write like this if I'm not authenticated then I want to return or I want to redirect to my let's say again to home page or let's say to contact us page right so what we can do is context context.name location and I can provide my my app route constants dot contact us route this is it and if I am authenticated so I need to write else else I don't need to anything uh don't need to do anything I want to return null but one more thing if is not it can be accessible okay uh what is this instance member yeah yeah so what we can do is so over here I'm creating an instant of this go router class and I cannot use this is auth because this is I am taking it in a parameter so one more mistake I have instead of my app router I have used nyi proud app router I hope you understood that I meant my app router so this we can change it later but what we need to do is I need to define a static function so this will be a return router this will be a function and this we can take as Boolean is auth and we can return so over here I can Define I can cut this router from here I can Define the router over here and I can return my router like this right and this will be of type static go router perfect and I can remove this from the parameter now from this Constructor also I can remove and this is all set so I have defined one function we will change everything in the main that's not an issue we have defined this function as static so this is going to return me a router and yes so if is auth that means if I'm authenticated and one more thing if I'm on profile page this also I need to check it right if I'm authenticated and if I'm on profile page then let it be but if I am so this will be but if I'm not authenticated and I went to profile page then you cannot do it you have to return back to the home page right so if I am not authenticated and and so this will be uh if the user is not authenticated and and state DOT location dot starts with and here will be my named route which will be my app route constants uh not name route it will be let's just do one thing let me just remove this thing and let me just show you what is happening let me just remove everything so let me just remove everything so redirect it will be uh let's print state DOT location state DOT location let me just be very clear to you so that you don't have any doubt let me just refresh this you can see I have got slash if I go to about you can see Slash about and if I go to profile you can see profile slash actually slash this because this I was passing uh the mass parameter right now if I go to uh contact us you can see Slash contact us so what is what I want so if I am not authenticated let's try to write this if not authenticated and and and and my state DOT location dot starts with slash now it will be dollar interpolation string interpolation and my uh I want this profile and what this profile is profile is nothing but my uh my my my route constants dot profiling right so what I can do is I can write my route constants dot let me just write yes my route constants Dot profile routing perfect so this will give me profile so if any page are out if any page route starts with Slash profile so I need to check it if I authenticate it then go to this page if not authenticated then you cannot go to this page then you need to go to the contact us page or you can go back to your home page let's write something like that let's return uh context dot named location and here you can provide the name of that route so let's pass uh this thing uh contact uh contact us so my route constants dot contact us route name so this is everything and if I am authenticated and I am on profile page then you don't need to return anything return null and let the user be on profile page let's just save it I hope this should work else we will debug the problems right so everything is done in main.in main dot dot I'm passing the my route information parser as my router my app router dot uh return router and true will be my is auth condition so for this thing I should stay on the profile page let me just refresh and go to about page working then I can go to profile page working contact us page working now I can us is Odd as false over here us and delegate also false let me just refresh go to profile page you can see um I'm on contact us page now so this worked very smoothly very perfectly right so what you can do is over here in this page itself you can run your functions like Firebase authentication and you can check if the user is authenticated then let the user go on profile page if the user is not authenticated then do not uh let the user go to profile page you can pass the user to login page welcome page onboarding page flash page any page right so now last thing I need to tell that uh we used go router.ofcontext dot push named right so similar to push named we have go named also and we have push and go also so what is the difference between go and push right so consider push like a stack there is a stack and you can push one book into that stack another book another book another book so one book will be over the another book right so this is like a stack if you have learned data structures and algorithm it is like a stack like one thing over another thing right so similarly your page is your route will also be one over other like if you are going from home page to profile page then profile page to about page page then it will be like a stack one page over the other you can navigate it dot pop and it will like pop one one page from the stack but go in the similar way it is not exactly same but there is one difference that go does not keep all those pages in the stack it is going to replace the previous stack right here if you are going from home to profile profile to this thing then it is not going to uh store all these home and profile it is going to replace all these Stacks with the news with the with the new route right if you're going from home to profile then home will be lost right and profile will be your new initial route if you are going from profile to about then profile will be lost and about will be your new initial route so this was the difference between go and push you can use it as per your choice and as per the requirement I hope you like this video if you have any doubt you can reach out to me on LinkedIn and Instagram do follow me there because I post all the stuff there also hit the like [Music] and thanks a lot

Channel: Akshit Madan

Views: 29,439

Keywords: #developer, #flutter, #appdevelopers, #ios, #android, #google, #apple, #data, #datascience, #collegestudents, #engineering, blockchain, freelancer, college, students, internship, web3, solidity, python

Id: QwlrHjBYQ2M

Length: 33min 48sec (2028 seconds)

Published: Fri Dec 02 2022