我们按照官方的实例来写一个

第一步：先创建一个无状态的小部件类

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      //应用名       title: "Flutter Demo",
      //应用样式主题       theme: new ThemeData(primaryColor: Colors.white),
      //home内包装的是应用程序启动时默认展示的小部件       //创建一个脚手架,将小部件放在自己中心       home: new Scaffold(
        body: new Center(
          child: RandomWordsWidget(),
        ),
      ),
    );
  }
}

我们在build中初始化了一个MaterialApp对象，MaterialApp负责实现国际化（支持多种语言）、路由与导航（多屏幕之间转场）等功能。

第二步:创建一个有状态的小部件

class RandomWordsWidget extends StatefulWidget {
  @override
  createState() => RandomWordsState();
}

第三步:创建一个随机生成单词小部件状态类

class RandomWordsState extends State {
    @override
    Widget build(BuildContext context) {
     //............     }
}

下面再RandomWordsState类中初始化三个变量

  ///单词列表   var wordList = <WordPair>[];

  ///收藏列表   var savedList = new Set<WordPair>();

  ///字体样式   var biggerFont = new TextStyle(fontSize: 18.0);

看到小部件状态类中重写了Widget build(BuildContext context) ，我们点击BuildContext进入源码中都能看到这个类的注释说明，就目前我个人认为基本上直接new Scaffold 初始化一个脚手架。

我们看到脚手架内参数的名称，那么我们现在初始化一个RandomWordsState状态的脚手架

 @override
  Widget build(BuildContext context) {
    //初始化一个含appbar的脚手架     return new Scaffold(
      appBar: new AppBar(
        //actionbar标题         title: new Text('Startup Name Generator'),
        //actionbar按钮操作         actions: <Widget>[
          new IconButton(
              //onPressed如果设置Null则按钮被禁用,设置其他则走对应的回调,界面跳转等等               icon: new Icon(Icons.list), onPressed: favoriteListActivity)
        ],
      ),
      //创建一个列表widget       body: buildWordList(),
    );
  }

第四步:先构建列表的一行

需要使用ListTile

Widget buildRow(WordPair wordPair) {
    var isCollection = savedList.contains(wordPair);
    return new ListTile(
      //标题       title: new Text(
        wordPair.asPascalCase,
        style: biggerFont,
      ),
      //标题后面显示的小部件       trailing: new Icon(
        //true的话显示实心❤️，false显示空❤️         isCollection ? Icons.favorite : Icons.favorite_border,
        color: isCollection ? Colors.red : null,
      ),
      onTap: () {
        //通知框架该对象的内部状态已经更改         setState(() {
          if (isCollection) {//将变化从收藏列表移除             savedList.remove(wordPair);
          } else {//将变化添加到收藏列表             savedList.add(wordPair);
          }
        });
      },
    );
  }

第五步:构建列表

Widget buildWordList() {
    return new ListView.builder(
        //四个方向的边距像素         padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          //如果是奇数返回分割线           if (i.isOdd) return new Divider();
          //偶数的话开始构建一行           final index = i ~/ 2;
          if (index >= wordList.length) {
            //无限滚动的列表数据无限增加             wordList.addAll(generateWordPairs().take(10));
          }
          return buildRow(wordList[index]);
        });
  }

最后一步:跳转到收藏列表

void favoriteListActivity() {
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) {
          //返回一个列表ListTile，Iterable<Widget>可以直接用var或final代替           //这里为了便于读者阅读，先写成Iterable<Widget> 声明           //将items的内容设置给Adapter           Iterable<Widget> tileList = savedList.map(
            (pair) {
              //ListView的一行               return new ListTile(
                title: new Text(
                  pair.asPascalCase,
                  style: biggerFont,
                ),
              );
            },
          );
          //给Listview设置分隔线           Iterable<Widget> widgetList = ListTile
              .divideTiles(
                context: context,
                tiles: tileList,
              ).toList();

          return new Scaffold(
            appBar: new AppBar(
              title: new Text('Saved Suggestions'),
            ),
            //添加ListView控件             body: new ListView(children: widgetList),
          );
        },
      ),
    );
  }

路由导航跳转，后面的文章会介绍到,先大概了解下。