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 cars =
     new List.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: [
           new Card(
               child: new Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                 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: [
                 new Text(
                   '汽车颜色：',
                   style: new TextStyle(fontSize: 20.0),
                 ),
                 new Text(
                   car.color,
                   style: new TextStyle(fontSize: 20.0),
                 )
               ])),
         ],
       ),
     ),
   );
 }
}

运行后效果如下：

20180917111007994.png

20180917111021978.png