【Flutter】编写第一个 Flutter 应用（官方示例完整代码版）_flutter编写

基础步骤

第一步: 创建 Flutter app

第二步: 打开 /lib/main.dart，删除main.dart的所有代码，然后替换为下面的代码

第三步: 安装依赖程序 english_words

第四步: 启动应用

//导入包。
import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

//文档
// https://flutter.cn/docs/get-started/codelab

//应用入口。
void main() => runApp(MyApp());

//应用结构。
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       //应用名称
      title: '名称生成器',
      //白色主题
      theme: new ThemeData(
        primaryColor: Colors.white,
      ),
      //应用首页路由
      home: RandomWords(),
    );
  }
}

//定义首页
class RandomWords extends StatefulWidget {
  const RandomWords({Key? key}) : super(key: key);

  @override
  //State类
  _RandomWordsState createState() => _RandomWordsState();
}

//State类
class _RandomWordsState extends State<RandomWords> {
  final _suggestions = <WordPair>[];
  final Set<WordPair> _saved = new Set<WordPair>();
  final _biggerFont = const TextStyle(fontSize: 18.0);

  Widget _buildSuggestions() {
    return ListView.builder(
        padding: const EdgeInsets.all(16.0),
        itemBuilder: (context, i) {
          if (i.isOdd) {
            return const Divider();
          }
          final index = i ~/ 2;
          if (index >= _suggestions.length) {
            _suggestions.addAll(generateWordPairs().take(10));
          }
          return _buildRow(_suggestions[index]);
        });
  }

  Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);
    return ListTile(
      title: Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
      ),
      onTap: () {
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }

  @override
   //构建UI界面
  Widget build(BuildContext context) {  
    //Scaffold 是 Material 库中提供的页面脚手架
    //它提供了默认的导航栏、标题和包含主屏幕widget树的body属性
    return Scaffold(
      appBar: AppBar(
        title: const Text("名称生成器"),
        actions: <Widget>[
          new IconButton(icon: const Icon(Icons.list), onPressed: _pushSaved),
        ],
      ),
      body: _buildSuggestions(),
    );
  }

  void _pushSaved() {
    Navigator.of(context).push(
      new MaterialPageRoute<void>(
        builder: (BuildContext context) {
          final Iterable<ListTile> tiles = _saved.map(
            (WordPair pair) {
              return new ListTile(
                title: new Text(
                  pair.asPascalCase,
                  style: _biggerFont,
                ),
              );
            },
          );

          final List<Widget> divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();

          return new Scaffold(
            appBar: new AppBar(
              title: const Text('收藏列表'),
            ),
            body: new ListView(children: divided),
          );
        },
      ),
    );
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

将包依赖项添加到应用程序

1. 依赖它
   打开 pubspec.yaml 文件，然后在dependencies下添加english_words:
2. 安装它
   在 terminal中: 运行 flutter packages get
   或者
   在 IntelliJ中: 点击pubspec.yaml文件顶部的 ‘Packages Get’
3. 导入它
   在Dart代码中添加相应的import语句.

最终效果：

参考
https://flutter.cn/docs/get-started/codelab