Flutter Navigation Tutorial: Mastering push and pushNamed Functions #flutter #appdevelopment

in this video we shall talk about the widget Navigator of flutter in flutter a page or a screen is called the root and the vision Navigator manages the roots of an app using Navigator we can load a new page or root come back to the previous page basically using Navigator we can navigate between the pages of a flutter app which I'll talk about two different approaches one declarative and the other is imperative in the imperative approach we use the function push of the Navigator and in the declarative approach we use the function push named we use named roots so here I have created a demo project with two screens in flutter Pages 2 are represented by widgets so I have created two widgets page one and page 2. on page one we have a button to load page two so let's try the first option we shall use the function push of the navigator navigator is actually a widget a state full widget so it has an Associated State class and this functions push push named pop Etc are there inside the state class so first of all we have to get an instance of the Navigator state of the appropriate Navigator instance we can get that by calling Navigator dot off and passing the context to this function this will give us the state of the Navigator now you may ask where is the Navigator have we created an instance of the Navigator class and the answer is no we have not created the Navigator ourself it is possible though but in most of the cases you won't need to create the Navigator yourself in Navigator instance is created inside the material app widget and we can access its state anywhere inside the app by calling Navigator dot off and by passing the context now to load it page to load our second page page to whistle call the function push we have a widget for the second page right but we cannot pass the widget directly to this function this function needs an instance of the class root so first let's create an instance of the root using our widget we shall create an instance of the class material page root which is a subclass of the root class and we are using this because it uses platform specific animations while transitioning to a new root to reconstructor of material page root we have to pass a builder function and implementation of the Builder function this function has a specific signature it gets the context so we have to add a parameter of of type build context and from this function we have to return an instance of the widget with which we want to create the root now run the app and tap on this button and we are on page two now if you want to pass some data from page one then you can get the data through the Constructor so add the corresponding parameter add a field and get the data inside the Constructor then use it wherever you want let's print the value that we get from page 1 here now inside page 1 while creating the instance of page to pass the corresponding data now run the app and tap on this button and here we can see that the data that we are we are passing from page one is getting printed here the Navigator keeps the roots in a stack so when we call the function push or push named the new root is added to the top of the stack and the root at the top of the stack is the one visible to the user at a particular moment if you press the back button on the app bar or the back button of your device the topmost root is popped or removed from the stack making the previous one the previous route visible to the user and if you want to go back to the previous page programmatically without using the back buttons of the priority device then you can call the function pop so you have to call Navigator dot off pass the context and call the function pop it will remove the topmost root from this deck so we have learned what is Navigator and how to navigate in flutter using Navigator we have learned to use the push function which is also called the imperative way of navigation now let us explore the other approach using named Roots using the function push named which is also called the declarative way first we have to define the roots of our app and we have to do that while creating the instance of material app widget so we are creating this inside the main.dart file and here the Constructor of the material app wizard has parameters named initial root and Roots using initial root we have to specify the route that we want to load while launching our app and using the parameter Roots we have to specify all the different routes so here add the backslash as the initial route so this is the name of the initial route we are going to Define which widget to load when the app is lost so we have specified the name of the initial route and now we are going to define the corresponding widget for this root so initial load specifies the route that loads when we launch our app now we have to specify which widget to load on navigating to this route and the other routes right for that we shall pass a map to this parameter Roots we shall add one entry corresponding to each root to this map so add the root name then add a colon and then add the corresponding Builder function remember we used Builder function while creating the instance of material page root right so we are going to use a similar Builder function here as well so this will have one parameter of build type context because it gets the context and from this function we have to return the widget that we want to associate with this root so for the backs list for the initial route we sell return an instance of the widget page one and for the second root let's name it for the second root add page 2 as the name of the root and then add the column and from the Builder function return an instance of the widget page 2. for now let's remove the parameter from The Constructor of the widget page to and initialize this field messes with a default string inside page 1 to load page to we shall call the function push named this time because we are using named Roots right Navigator dot off pass context and call Push named and to this function pass the name of the root that we want to load so in this case it is Page 2. now run the app and we have an error here it says we cannot use the property home if we are already passing value for initial route so in this case as we are already using initial route we cannot use the property home so let's remove this home the initial route itself represents the home page right now reload the app and now the error has gone and tap on this button and page 2 loads so it is working now let us try to pass some data from the page 1 to page 2. so to pass data we can use the parameter arguments of the push named function pass the data to this parameter argument I am passing a string here we can pass some other object as well now inside page 2 we have to get this data from the corresponding root and we can get the root by calling model root dot off and passing the context so this will give us the corresponding root and then we can get the arguments from the field settings so model root dot off passcontext dot settings dot arguments and now we have to cast it to the proper type in this case the argument we have passed is a string so we are going to cast it to string and we shall assign the result to this field and as we are already using this field here in the we are already displaying it on the screen right so let's run the app again tap on this button and this time you can see the message which is being passed from page one foreign to use the functions push and push named to load a new root right and I have told you that these functions are there inside the Navigator State class so first of all we have to get the Navigator State the corresponding Navigator state by calling Navigator dot off and passing the context and then only we have called the function push and push named right but you will find the equivalent functions inside the Navigator class as well so you will find some static functions named push and push named pop inside the Navigator class so you can directly call Navigator dot push and pass the corresponding arguments and it will work you can also call navigator.pussnamed and this will work similar to the way we have done with Navigator dot off and then calling push named so if you take a look at the implementation of the functions inside the Navigator class you will find that inside this function the implementations this approach is being used so inside it is getting the Navigator State and then calling the push name itself so I have shown you both the ways because you will find in different examples you will find using these two approaches so in some examples you will find the using the static functions of the Navigator class in some other examples you will find the calling the functions of the Navigator State directly so I have shown you both us so that it does not confuse you

Channel: Droidmonk

Views: 214

Keywords: flutter, flutter navigation, flutter tutorial, flutter tutorial for beginners, flutter course

Id: k_TeYg7pwog

Length: 11min 17sec (677 seconds)

Published: Thu Sep 28 2023