Most apps contain several screens for displaying different types of information.For example, an app might have a screen that displays products. Users can thentap the image of a product to get more detailed information on a new screen.

Terminology: In Flutter, screens and pages are called routes. The remainder of this doc refers to routes.

In Android, a route is equivalent to an Activity.In iOS, a route is equivalent to a ViewController.In Flutter, a route is just a widget.

How do you navigate to a new route? By using theNavigator.

Directions

The next few sections show how to navigate between two routes,using these steps:

• Create two routes
• Navigate to the second route using Navigator.push()
• Return to the first route using Navigator.pop()

1. Create two routes

First, create two routes to work with. Since this is a basic example,each route contains only a single button. Tapping the button on thefirst route navigates to the second route. Tapping the button on thesecond route returns to the first route.

First, set up the visual structure:

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

2. Navigate to the second route using Navigator.push()

To switch to a new route, use theNavigator.push()method. The push() method adds a Route to the stack of routes managed bythe Navigator. Where does the Route come from?You can create your own, or use aMaterialPageRoute,out of the box. MaterialPageRoute is handy because it transitions to thenew route using a platform-specific animation.

In the build() method of the FirstRoute widget, update the onPressed()callback:

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

3. Return to the first route using Navigator.pop()

How do you close the second route and return to the first? By using theNavigator.pop()method. The pop() method removes the current Route from the stack ofroutes managed by the navigator.

To implement a return to the original route, update the onPressed()callback in the SecondRoute widget:

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

Complete example

import 'package:flutter/material.dart';
void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}
class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}
class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}