Flutter Navigation (FirstPage to SecondPage) - Using the Navigator Push

hello guys uh today i'm showing you how to use page navigation and flatter i mean by clicking a button you can push or you can go the second page so let's do it first create a project it's this is the project just i opened i skipped the video because let's start downloading just when you open a project and this will be the show code and this is the face so first remove all of these like sorry [Applause] we have to go to our second page let's get creator second page first live folder new dot file uh second for the first page we have to take so here we have uh declared home this capital scaffold and then this is the body scaffold has 40 body restart the app okay this is the container and we have to create a button which is indicated [Applause] and icon so on paste this function then we have to go for icon child icon anything or we don't take icon we'll take text second page that will load it center all right not center the elevating button i should take its center center uh what's this minority okay see here we can see and comes from just ignore it when you click this look when you click the second button it's nothing so first of all we have to create something on second page so we can recognize the second piece you go to the second place the container on the safe area container then container as child child and sticks which is font size and make it 40 make it 14 so you can so this is our second page and when you click it it will create a text which is this is second page okay now go to the first page now when you click to the second page button this will open the second page so before that uh we have to create another thing that is apart for our employees we just type in title i think this page so this will take the navigation text in the middle see okay our way our structure is complete now go for second page code so here we see there is elevated button and we have a method which is function we sorry we have a function that on pressed and we have to do some put the second page of presentation for the second place we have to navigate with this navigator this is navigator dot off which is context context but we have to push push means we have to go to the we have to push the button for second pitch and pop means we have to bet so push so here there is a route we have to raise material base route see material page route npr is now then we have there is a builder uh we have to create a context which is full context the second pistol second phase class is second page so copy the text and paste it see we have import one see let's follow second page there's the error so here we have to go for this class is still a hero cursor here input library for the second piece it will auto generate it second page and we can now use it see now we start sorry there is some hero where is the hero i think there okay now restart it so basically start we have to move the second piece first click we have some ui so how is the error so there is some error so what we will do we will remove this and we can remove these and difficulty to code okay just got the whole code so we have to direct for the function so we can return the second page again okay now now we start try this i think we took work see i have an error which is called navigator operation requested with a context that not does not include a navigator i do not cut the video i want to show you how to fix it so for fixing it we have to call another stateless or stateful class or widget in the material so what we will do what we will do look for mark now okay now it will be show some hero let's create another let's take a preset which is a okay okay now in this home page widget we will do our work this is careful now if we restart the app then close it there's the second piece i think you will understand why this error because we have to uh initiate another state lewis visit uh in the material app on the direct material f navigator push call there is an error i can find see because when you call a navigator of context framework goes up in widget tree attached to provided context and tries to find the closest navigator so the easiest way way that we we have to we have follow i mean i follow the noses this is this in the material app he called another class i mean another stateful widget then he use the navigator class now go back to our project in second base and this is black why because we don't have any so for there is no option for backing so for packing we have to create a apple let's copy our previous emperor which is there and paste it when you create an ad but it will automatically create a back button so we don't have to create a back button if we have a button so second place push in back i mean pop the navigate first second thank you

Channel: Flutter With NAS

Views: 434

Keywords: flutter, nastech, nastech org, nastechorg, android, android studio, flutter programming, dart, dart language, flutter with dart, flutter with android studio, beginners, flutter for begginers, flutter tutorial, tutorial, page navigator flutter, push, pop, push flutter, push pop flutter, how to go second page on flutter, next page flutter, Navigator operation requested with a context that does not include a Navigator

Id: 3z7XBsF0Xts

Length: 13min 9sec (789 seconds)

Published: Tue Jun 21 2022