Flutter Move To New Screen | Screen Navigation Methods | Page Navigation | Visual Studio Code

now we are going to study how to move from one screen to another we will use the Navigator class for that first we will use the Navigator do push method this method pushes a new route onto the stack which can be a screen or page we create a button here when we press the button we move to the new screen for that we create a new screen in a new file name the file detail. Dart import material. Dart then create a stateless widget class in the new file name the class detail return a scaffold widget in the build function add an app bar and include a title inside it the title text is detail screen for identification then include the body and add a center widget okay then go to the main. dart file add an elevated button here include an anonymous function write the function later add a label for the button the label is go to detail screen run the app and the button is displayed add a little space before the button by adding a sized box and setting a height then we add the function for page navigation call the Navigator many functions are available but we will use the push function now this function adds a new route to the stack of routes managed by by the Navigator the context parameter is the build context of the current Widget the route parameter specifies the widget that represents the new screen for calling that new page we use material page route the material page route provides a platform specific animation when transitioning to the new route it is a part of the flutter framework's navigation system and helps to create a material design route inside the Builder we call the new screen widget that is in the detail doart file e so we need to import it at the top then run the app and click the button the screen moves to the second page this is a stack system when we call the push function it adds a new screen on top of the stack there is a back arrow present when we click the back arrow it returns to the previous screen that is how the push function works then we add a back button on the detail page add an elevated button and an unpressed function then add a text label back to home e the back to home button is displayed here add the function to go back the Navigator dop function pops the current route off the stack returning to the previous screen run the app go to the detail screen then click the back button okay it's back to the home screen then we'll look at another function using navigation push replacement this method replaces the current route with a new route so the new new route will occupy the same place in the stack after using this we'll check what's happening there run the app press the button to move to the next page here the back icon is not available because the homepage has been replaced by the new page this method replac is the current route with a new route so the new route occupies the same place in the stack when we press the back to home button no page is visible there to study another function let's first change the homepage to use the push function instead of push replacement then create a another page for another screen name the file more detailed dot Dart create another screen with the title more detail copy the code from the detail page and create the new one changing the title accordingly keep the back button on this page then go to the detail page and wrap the back button with a column add another button copied from the main page change the navigation page to more detail import the more detail page add a comma here finally run the app go to the detail page the button go to more detail is displayed there then we change the main AIS alignment to Center clicking that button moves us to the more detail screen where all back icons are available then we go to the detail page and change the push function to push replacement function finally run the app and press the button on the detail page navigate to the more detail page the back icon is available there when we press the back icon we go to the first page because the middle page is replaced this is because we're using the push replacement function now let's use another function push and remove until this method pushes a new route and removes all the previous routes until the predicate returns true there is another parameter also add the new route in here then run the app go to the detail page when we press the more detail button the back icon is removed because all previous screens in the stack are removed when we try to go back that screen is blank then we are going to study another function Navigator do push named this method pushes a named route onto the stack it requires route names to be defined in the material app or copertino app widget open the main do.art file remove the push function then create one more button we're using two named routs one is going to the detail screen and the other is going to the more detail screen then we declare route names in material app using the routes parameter it's possible to declare multiple routes inside these curly braces here we declare the first name as detail one which locates to the detail class then declare another named detail 2 which locates to the more detail class e call the function in the button Navigator push named pass any route name in here we use the first route name detail one use the same function in the next Button as well but change the route name to detail too then run the app click the button detail screen it navigates to the detail screen then click more detail screen it navigates to the more detail screen now let's study one more function Navigator push named and remove until this method pushes a named route and removes all the previous routes until the predicate returns true in button two we change the function call the function push named and remove until we know what is happening here we already studied push and remove until the same thing is happening here here give the route name detail too then run the app the first one uses the push named function and the back button is available here next is the push named and remove until function and now the back button is not available this is the end of this tutorial I will come with another tutorial subscribe for more videos like this thank you for watching

Channel: True Coders

Views: 231

Keywords: flutter navigation, flutter new page link, flutter anchor, flutter page link, flutter move to new screen

Id: PQRHo4078fY

Length: 21min 57sec (1317 seconds)

Published: Tue Jun 11 2024