大多数应用程序包含多个页面。例如，我们可能有一个显示产品的页面，然后，用户可以点击产品，跳到该产品的详情页。

在Android中，页面对应的是Activity，在iOS中是ViewController。而在Flutter中，页面只是一个widget！

在Flutter中，我们那么我们可以使用Navigator在页面之间跳转。

步骤

  1. 创建两个页面。
  2. 调用Navigator.push导航到第二个页面。
  3. 调用Navigator.pop返回第一个页面。

1. 创建两个页面

我们创建两个页面，每个页面包含一个按钮。点击第一个页面上的按钮将导航到第二个页面。点击第二个页面上的按钮将返回到第一个页面。页面结构如下：

  1. class FirstScreen extends StatelessWidget {
  2.   @override
  3.   Widget build(BuildContext context) {
  4.     return new Scaffold(
  5.       appBar: new AppBar(
  6.         title: new Text('First Screen'),
  7.       ),
  8.       body: new Center(
  9.         child: new RaisedButton(
  10.           child: new Text('Launch new screen'),
  11.           onPressed: () {
  12.             // Navigate to second screen when tapped!
  13.           },
  14.         ),
  15.       ),
  16.     );
  17.   }
  18. }
  20. class SecondScreen extends StatelessWidget {
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     return new Scaffold(
  24.       appBar: new AppBar(
  25.         title: new Text("Second Screen"),
  26.       ),
  27.       body: new Center(
  28.         child: new RaisedButton(
  29.           onPressed: () {
  30.             // Navigate back to first screen when tapped!
  31.           },
  32.           child: new Text('Go back!'),
  33.         ),
  34.       ),
  35.     );
  36.   }
  37. }

2. 调用Navigator.push导航到第二个页面

为了导航到新的页面，我们需要调用Navigator.push方法。 该push方法将添加Route到由导航器管理的路由栈中！

该push方法需要一个Route，但Route从哪里来？我们可以创建自己的，或直接使用MaterialPageRoute。 MaterialPageRoute很方便，因为它使用平台特定的动画跳转到新的页面(Android和IOS屏幕切换动画会不同)。

在FirstScreen Widget的build方法中，我们添加onPressed回调：

  1. // Within the `FirstScreen` Widget
  2. onPressed: () {
  3.   Navigator.push(
  4.     context,
  5.     new MaterialPageRoute(builder: (context) => new SecondScreen()),
  6.   );
  7. }

3. 调用Navigator.pop返回第一个页面。

现在我们在第二个屏幕上，我们如何关闭它并返回到第一个屏幕？使用Navigator.pop方法！ 该pop方法将Route从导航器管理的路由栈中移除当前路径。代码如下：

  1. // Within the SecondScreen Widget
  2. onPressed: () {
  3.   Navigator.pop(context);
  4. }

完整的例子

  1. import 'package:flutter/material.dart';
  3. void main() {
  4.   runApp(new MaterialApp(
  5.     title: 'Navigation Basics',
  6.     home: new FirstScreen(),
  7.   ));
  8. }
  10. class FirstScreen extends StatelessWidget {
  11.   @override
  12.   Widget build(BuildContext context) {
  13.     return new Scaffold(
  14.       appBar: new AppBar(
  15.         title: new Text('First Screen'),
  16.       ),
  17.       body: new Center(
  18.         child: new RaisedButton(
  19.           child: new Text('Launch new screen'),
  20.           onPressed: () {
  21.             Navigator.push(
  22.               context,
  23.               new MaterialPageRoute(builder: (context) => new SecondScreen()),
  24.             );
  25.           },
  26.         ),
  27.       ),
  28.     );
  29.   }
  30. }
  32. class SecondScreen extends StatelessWidget {
  33.   @override
  34.   Widget build(BuildContext context) {
  35.     return new Scaffold(
  36.       appBar: new AppBar(
  37.         title: new Text("Second Screen"),
  38.       ),
  39.       body: new Center(
  40.         child: new RaisedButton(
  41.           onPressed: () {
  42.             Navigator.pop(context);
  43.           },
  44.           child: new Text('Go back!'),
  45.         ),
  46.       ),
  47.     );
  48.   }
  49. }