Navigate between pages using the Flutter Navigator

Paul Halliday
InstructorPaul Halliday

Share this video with your friends

Send Tweet
Published 4 years ago
Updated 2 years ago

In this lesson we look at navigating between two pages using the Navigator.

Instructor: [00:00] Here we have a brand-new Flutter project. Inside of the project I have two main pages. These pages can be found in home.. and accountInformation.., and each one is a stateless widget which simply returns a scaffold and some user interface. Inside of home.. we're going to move down to the cards, and the card has a, and inside this we have a flat button with an onPressed event.

[00:33] This means whenever the user clicks the account information button, we want to say navigator.push and this allows us to push the next route, and that will be our account information page. That takes in the build context, and then we'll use what's known as the material page route.

[00:54] We can specify the builder as the context and then next we can push the accountInformation page. You'll have to make sure that you import your page by using the syntax import 'package:the name of your project/where the page is'. After hot reloading the project, we can now select account information. We've now navigated to the second page.

[01:20] Now from within account information, if I want to go back to the previous page, we can select this floating action button, and that will be inside of the onPressed event. Here we can, and this takes the most previous route of the top of the stack and also requires the context. If the user was to now select the floating action button, they are returned to the previous page.