一、不带参数的页面跳转和返回

 import 'package:flutter/material.dart';

 void main() {
   runApp(MaterialApp(
     title: '导航示例',
     home: new FirstScreen(),
   ));
 }

 //第一个页面
 class FirstScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold (
       appBar: AppBar(title: Text('导航页面'),),
       body: Center( //让按钮居中显示的框架
         child: RaisedButton(//凸起的按钮
           child: Text('checkout detail'), //按钮的文字
           color: Colors.red,//按钮的背景色
           child: Text('checkout detail'), //按钮的文字
           textColor: Colors.orange, //文字的颜色
           highlightColor: Colors.green,//高亮（被点击）时的颜色
           focusColor: Colors.blue,
           hoverColor: Colors.purple,
           elevation: 20.0, //阴影
           onPressed: (){//点击按钮的事件
             Navigator.push(context, MaterialPageRoute( //跳转界面到SecondScreen
               builder:(context)=> new SecondScreen()
             ));
           },
         ),
       ),
     );
   }
 }
//第二个页面
 class SecondScreen extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(title: Text('detail page'),),
       body: Center(
         child: RaisedButton(
           child: Text('back'),
           onPressed: (){
             Navigator.pop(context); //返回到上一级界面
           },
         ),
       ),
     );
   }
 }

其中需要注意的是RaisedButton按钮组件，它继承自MaterialButton,它有两个最基本的属性：

child：可以放入容器，图标，文字。让你构建多彩的按钮。
onPressed：点击事件的相应，一般会调用Navigator组件。
当然它还有长按点击事件：onLongPress点击事件。

Navigator.push 和 Navigator.pop

Navigator.push：是跳转到下一个页面，它要接受两个参数一个是上下文context，另一个是要跳转的函数。
Navigator.pop：是返回到上一个页面，使用时传递一个context（上下文）参数，使用时要注意的是，你必须是有上级页面的，也就是说上级页面使用了Navigator.push。

运行结果：简书中没法添加录制视频，只能截图显示显示效果

二、导航参数的传递

下列代码功能是创建一个商品列表页，点击商品跳转到商品详情页

import 'package:flutter/material.dart';

//构造一个Product对象
class Product {
  final String title;//商品名称
  final String description;//商品描述
  Product(this.title, this.description);//构造函数
}

void main(){
  runApp(MaterialApp(
    title: '导航的接收和传递',
    home: ProductList(
      //初始化并赋值products数组
      products: List.generate(20, (i)=>Product('商品$i','这是一个商品详情'))
    ),
  ));
}
//创建商品列表页
class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({@required this.products}):super();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('商品列表')),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context,index){
          return ListTile(
            title: Text(products[index].title),
            onTap: (){
              Navigator.push(
                  context, 
                  MaterialPageRoute(
                    builder: (context) => ProductDetail(product: products[index])
                  )
              );
            },
          );
        },
      ),
    );
  }
}
//创建商品详情页
class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({@required this.product}):super(); //构造函数用来接收参数
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('${product.title}'),), //把传递过来的product中的title作为标题
      body: Center(
        child: Text('${product.description}'),
      ),
    );
  }
}

列表页

商品详情页

三、导航参数的接收

下列示例是点击按钮进入详情页，然后点击详情页的按钮返回到上一级界面并返回值显示。
这段代码中使用了async是异步加载，Dart规定async标记的函数，只能由await来调用。
使用了SnackBar这个组件来显示返回值。

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title: '页面跳转返回数据',
    home: FirstPage(),
  ));
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("商品")),
      body: Center(
        child: RouteButton(),
      )
    );
  }
}

class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        _navigateToDetail(context);
      },
      child: Text('点击进入商品列表页'),
    );
  }
  //下划线表示是内部方法
  //async是异步加载，Dart规定async标记的函数，只能由await来调用
  _navigateToDetail(BuildContext context) async{
    final result = await Navigator.push( //接收DetailPage传回来的值
        context, 
        MaterialPageRoute(builder: (context)=>DetailPage())
    );
    //SnackBar是一个组件可以显示内容，用于显示返回值result
    Scaffold.of(context).showSnackBar(SnackBar(content: Text('${result}')));
  }
  //
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('可供选择的商品')),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text('This is a Mac'),
              onPressed: (){
                Navigator.pop(context,'Mac'); //把Mac值返回给上一个页面
              },
            ),
            RaisedButton(
              child: Text('This is a phone'),
              onPressed: (){
                Navigator.pop(context,'phone');
              },
            ),
          ],
        ),
      ),
    );
  }
}