Name: Getting Started with Navigation in Flutter
Uploaded: 2018-12-19T09:55:19-06:00
Description: 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.

Install the Flutter SDK & Create Your First Project

Flutter Project Walkthrough

Run a Flutter App on iOS

Run a Flutter App on Android

Walkthrough of the Default Flutter Application Boilerplate

Style a Flutter Text and Container Widget

Using Themes in Flutter to Share Colors and Font Styles

Load an Image in a Flutter App with the Image Class

Building Layouts in Flutter with Layout Widgets

Creating, Importing & Using Dynamic Widgets from Other Files in a Flutter Application

Creating & Updating State in a Flutter Application

Getting Started with Navigation in Flutter

Building Dynamic Lists in Flutter with ListViews

Navigation with Named Routes in Flutter

Getting Started with 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.

Getting Started with Navigation in Flutter

Share this video with your friends

Course

Getting Started with Flutter