Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Navigate between pages using the Flutter Navigator

    Paul HallidayPaul Halliday
    flutterFlutter

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.