...

/

Imperative Routing: Navigator 1.0

Imperative Routing: Navigator 1.0

Learn to use Navigator 1.0 in your app.

We got a brief overview of how Navigator 1.0 works in the previous lesson. We’ll learn how to use it in our app in this lesson. In the process, we’ll learn how to:

  • Navigate with anonymous routes
  • Navigate with named routes
  • Pass arguments to routes
  • Generate routes

Getting started

The app below has the screens mentioned in the previous lesson. Run it and follow through with the study as you implement imperative routing.

Shop app initial code

Anonymous routing

Once we have two screens implemented, we can accomplish anonymous routing in just two steps:

  • Step 1: Navigate to the second screen with Navigator.push(), which adds a Route to the navigation stack. We can add SettingsScreen() on top of the navigation stack. It will now be a visible screen to the user.

    In the app, replace line 49 of the item_list_screen.dart file with the code below:

        Navigator.push(
        context,
        MaterialPageRoute(
             builder: (context) => const SettingsScreen(),
        ),
        );
    
...