在 lib .. demo 的下面，新建一个文件 .. 名字是 material_components.dart ... 文件一开始导入 flutter 包里面的 material ..

下面新建一个带 Scaffold 小部件的 Stateless 类型的小部件 .. 这个 sls 是我自己在编辑器里面定制的一个代码片断 ..

类的名字是 MaterialComponents ... 打开 main.dart ... 文件的顶部导入刚才创建的 material_components.dart 这个文件 ..

然后在应用的路由列表里面，添加一个新的路由 .. 名字是 /mdc .. mdc 表示 Material Design Compoennt ..

对应的小部件用一下 MaterialComponents .. 暂时再把应用的初始路由，设置成 /mdc ... 执行一下 hot restart ...

再回到 MaterialComponents ....

给它添加一个主体 ... 这个界面的主体可以用一个 ListView .. 列表视图 .. 在它的 children 属性里面添加一组列表项目 .. 这些列表项目可以使用一个自定义的小部件 ..

ListItem

下面再定义一下 Stateless 类型的小部件 .. 名字叫 ListItem .. 表示列表项目 ..

小部件里添加两个属性 .. final String ... title ，标题 .. 再添加一个 final Widget page .. 按了列表项目我想打开一个新的页面，这个 page 表示的就是要打开的这个页面 ..

一个构造函数 .. ListItem .. 添加一个 this.title .. 还有一个 this.page ..

在小部件的构建方法里面，用一个 ListTile 小部件 .. 里面先用 title 设置一个标题 .. 这个标题是个 Text .. 具体的文字可以使用 title 这个属性来表示 ..

再给它添加一个 onTap ，处理一下用户的点按行为 .. 用一下 Navigator.of .. context .. push .. 打开一个新的页面 .. 它是一个 MaterialPageRoute 实例 .. 里面有个 builder 方法 .. 方法接收一个 context 参数 ... 具体的小部件用一下 page 这个属性来表示 ..

然后在列表视图里面，我们可以用一下刚才定义这个 ListItem .. 使用它的时候要提供一个 title 属性 .. 设置一下项目的标题 .. 比如 FloatingActionButton .. 还需要一个 page 属性 .. 它的值应该是个小部件，就是点按了标题以后要打开的页面 .. 用一下 FloatingActionButtonDemo() .. 下面再去定义一下这个小部件 ..

添加一个带 Scaffold 的 Stateless 小部件 .. 名字是 FloatingActionButtonDemo ..

现在模拟器上面会显示一个列表视图，里面只有一个项目，这个项目是个 ListTile .. 点按一下标题 .. 会打开一个新的页面 .. 这个页面是 FloatingActionButtonDemo ..