Flutter 传送数据至新页面

项目描述：首页有个汽车列表信息，每条数据显示汽车名称并自带一个汽车颜色，点击某个汽车，会进入汽车详情页面，在中间显示汽车名称和颜色。

下面撸码

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      title: 'Navigator Demon',
      home: new CarItemList(
        title: '汽车列表',
      ),
    );
  }
}

/*
汽车类，拥有两个属性，名字和颜色
 */
class Car {
  const Car(this.name, this.color);
  final name;
  final color;
}

/*
这是首页面，展示了一个50条汽车信息滚动列表，每个汽车信息行展示了一个汽车的名字和汽车的颜色
 */
class CarItemList extends StatelessWidget {
  CarItemList({Key key, this.title}) : super(key: key);
  final title;

  List<Car> cars =
      new List<Car>.generate(50, (i) => new Car('汽车 $i', '颜色是 $i'));

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new ListView.builder(
            itemCount: cars.length,
            itemBuilder: (context, index) {
              return new ListTile(
                title: new Text(cars[index].name),
                //点击后，通过路由导航至汽车详情页面，同时把点击的那个汽车信息传到下一个页面
                onTap: () {
                  Navigator.push(context,
                      new MaterialPageRoute(builder: (context) {
                    return new CarDetails(
                      car: cars[index],
                    );
                  }));
                },
              );
            }),
      ),
    );
  }
}

/*
这是汽车详细信息页面，通过首页点击某个汽车名字从而进入到这个汽车详情页面
并将在前一个页面点击某个汽车后，将汽车信息带入到本页面从而展示
 */
class CarDetails extends StatelessWidget {
  CarDetails({Key key, this.car}) : super(key: key);
  final Car car;
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('汽车详情'),
      ),
      body: new Container(
        alignment: Alignment.center,
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Card(
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  new Text(
                    '汽车名称：',
                    style: new TextStyle(fontSize: 20.0),
                  ),
                  new Text(
                    car.name,
                    style: new TextStyle(fontSize: 20.0),
                  )
                ])),
            new Card(
                child: new Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                  new Text(
                    '汽车颜色：',
                    style: new TextStyle(fontSize: 20.0),
                  ),
                  new Text(
                    car.color,
                    style: new TextStyle(fontSize: 20.0),
                  )
                ])),
          ],
        ),
      ),
    );
  }
}

运行后效果如下：