An application usually consists of multiple pages, and the mechanism for uniformly managing jumps between pages is often referred to as routing management or navigation management.

Route management

In Flutter, jumps between pages are managed through Route and Navigator

• Route: The abstraction of the page, which is responsible for creating the corresponding interface, receiving parameters, and responding to Navigator opening and closing
• Navigator: Maintain a routing stack to manage Route, Route opens and goes into the stack, Route closes and goes out of the stack, and can directly replace a Route in the stack.

Routing management in Flutter can be divided into two ways, depending on whether page identifiers need to be registered in advance or not.

• Basic Routing: There is no need to register in advance. When switching pages, the machine needs to construct page instances by itself.
• Named Routing: Page identifiers need to be registered in advance to open new routes directly through identifiers during page switching

Basic routing

In Flutter, when navigating to a new page using basic routing, you need to create an instance of Material PageRoute and call Navigator.push to press the new page to the top of the stack.

Note: Material Page Route is a routing template that defines the configuration of routing creation and handover transition animation.

Returning to the previous page requires calling the Navigator.pop method to remove the page from the stack.

The following code demonstrates how to use basic routing: open the second page in the button event of the first page, and implement the following functions in the three button events of the second page: back to the first page; open the third page in the form of no parameters and remove the second page from the stack; open the third page in the form of parameters; and open the third page in the form of parameters.

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: new Center(
            child: new FloatingActionButton(
                child: Text('Jump'),
                // Open the second page
                onPressed: () {
                  Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => new SecondPage()),
                  );
                })));
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: Text("Second pages"),
          centerTitle: true,
        ),
        body: new Center(
          child: new Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              new FloatingActionButton(
                  child: new Text('Close'),
                  // Back to page 1
                  onPressed: () {
                    Navigator.pop(context);
                  }),
              new RaisedButton(
                  child: new Text('Page 3, No References'),
                  // Open the third page without parameters and remove the current page from the stack
                  onPressed: () {
                    Navigator.pop(context);
                    Navigator.push(
                        context,
                        new MaterialPageRoute(
                            builder: (context) => new ThreePage()));
                  }),
              new FlatButton(
                  onPressed: () {
                    // Open the third page as a parameter
                    Navigator.push(
                        context,
                        MaterialPageRoute(
                            builder: (context) => ThreePage('Android Xiao Bai Ying')));
                  },
                  child: Text('Page 3. References'))
            ],
          ),
        ));
  }
}

class ThreePage extends StatelessWidget {
  String name;

  ThreePage([this.name]);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Third pages'),
          centerTitle: false,
        ),
        body: new Center(
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
              new FlatButton(
                  onPressed: () => Navigator.pop(context), child: Text('Regression')),
              new Text(name ??= 'test')
            ])));
  }
}

Run the code, the effect is as follows

As you can see, when navigating to a new page using basic routing, you can pass parameters through the construction method of the new page. When jumping to a new page, you can remove the current page from the stack or retain it. If removed, the new page will return to the previous page when it falls back, and if retained, the new page will return to the page that started the new page, that is, to the page that started the new page when it falls back. Back to the previous page