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
Become a member
to unlock all features

Level Up!

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


    Getting Started with Navigation in Flutter

    nader dabitnader dabit

    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.



    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


    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.