教程：https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2

1.添加收藏图标

class RandomWordsState extends State<RandomWords> {
  // Set 元组不允许重复元素，不同于 List
  final Set<WordPair> _saved = Set<WordPair>();
    ...
  Widget _buildRow(WordPair pair) {
    // 添加 _saved 状态
    final bool alreadySaved = _saved.contains(pair);
    return ListTile(
      ...
      // 添加 icon
      trailing: Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),           
    );
  }
    ...
}

2.添加收藏交互效果

class RandomWordsState extends State<RandomWords> {
 ...
  Widget _buildRow(WordPair pair) {
    ...
    return ListTile(
      ...
      // 添加点击事件，通过增加删除 _saved 中对应 pair 元素来达到切换效果
      onTap: () {
        //  setState 之后会重新 build 组件
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else { 
            _saved.add(pair); 
          } 
        });
    },            
    );
  }
...
}

效果图

3.导航到新页面

APP顶栏添加一个按钮和点击事件。

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('单词本'),
        // 添加一个动作组件 IconButton，列表按钮，按下的事件是 _pushSaved
        actions: <Widget>[
          IconButton(icon: Icon(Icons.list), onPressed: _pushSaved),
        ], 
      ),
      body: _buildSuggestions()
    );
  }
void _pushSaved() {
  // 导航切换视图
  Navigator.of(context).push(
    MaterialPageRoute<void>(
      builder: (BuildContext context) {
        final Iterable<ListTile> tiles = _saved.map(
          (WordPair pair) {
            return ListTile(
              title: Text(
                pair.asPascalCase,
                style: _biggerFont,
              ),
            );
          },
        );
        final List<Widget> divided = ListTile
          .divideTiles(
            context: context,
            tiles: tiles,
          )
              .toList();
        return Scaffold(        
          appBar: AppBar(
            title: Text('Saved Suggestions'),
          ),
          body: ListView(children: divided),
        );                  
      },
    ),
  );
}

右侧图片展示的就是跳转到新的导航页面，收藏夹页面展示我们收藏的单词。
请注意，导航器会在应用顶栏中添加“后退”按钮。我们不必显式实现Navigator.pop。点击后退按钮就可以返回到主路线。

4.修改顶栏颜色

class MyApp extends StatelessWidget {
  // 应用的根组件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '欢迎使用新青柚天气',
      theme: ThemeData(
        primarySwatch: Colors.teal,
      ),
      home: RandomWords(),
    );
  }
}

Tips

1. 某些窗口小部件属性采用单个窗口小部件（子窗口）child，而其他属性（如操作）则采用窗口小部件（子窗口）数组children，如方括号（[]）所示。

本次提交代码

https://github.com/youngchou1997/flutter_app/commit/a742225bb156fd4945f22de24cc8b82823975f20