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


    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 Pro 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
    orLog In




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

    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.

    Second screen also returns a scaffold with an app bar and a body widget.

    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.

    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.

    When we click on navigate, we now navigate to the next screen with the sliding transition.

    We can also call navigator.pop to go back one route in our navigations doc.

    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.

    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.