Navigate between pages using the Flutter Navigator

Paul Halliday
InstructorPaul Halliday
Share this video with your friends

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 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 ButtonTheme.bar, and inside this ButtonTheme.bar 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 navigator.pub, 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.

egghead
egghead
~ 31 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today