Getting Started with Navigation in Flutter
In this lesson we’ll learn how Navigation in Flutter works by navigating to a new page when clicking on a button using the push & pop methods. We'll also look at how to pass properties to a new screen dynamically.
Instructor: [00:01] We start off with the basic Flutter application that returns a material app with a home of main app. Main app has two main properties -- the app bar in the body with the body returning a raised button.
[00:14] We'd like to make it so when the user presses on the button, they navigate to another screen. To implement this, we'll first create a new widget called second screen that we'll be navigating to.
[00:25] Second screen also returns a scaffold with an app bar and a body widget.
[00:53] To navigate to this screen, we'll update the on-press handler for the raised button in the main app widget. Here, we'll call navigator.push. Navigator.push takes two arguments -- the context and the route. We'll be creating the route using the material page route class.
[01:10] Material page route replaces the entire screen with the platform adaptive transition. Material page route must take the builder argument which returns the screen we'd like to display.
[01:24] When we click on navigate, we now navigate to the next screen with the sliding transition.
[01:41] We can also call navigator.pop to go back one route in our navigations doc.
[01:54] Let's look at how to pass dynamic arguments to a route. We'll first create a constructor with the arguments that we'd like to receive to this widget. Next, we'll create a variable called title to hold the title value.
[02:17] Now, we'll update the title value in the app bar to be the dynamic value. To set this value, we can now reference it in the argument to second screen setting a title property.