第二步：使用
import 'package:flutter/material.dart'; import 'bold_text.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Center( child: BoldText('Hello, world!'), ); } }对比可以看到节省了很多代码行，尤其对于有多个地方用到的公共组件更加可以这样处理。
3. StatelessWidget 通用模板FileName为你文件名的驼峰形式：
import 'package:flutter/material.dart'; class FileName extends StatelessWidget { @override Widget build(BuildContext context) { return _buildWidget(); } Widget _buildWidget() { //TODO build your widget } } 4. StatefulWidget我们再来看下继承的 Widget 为 StatefulWidget 的情况。
第一步：新建 increment.dart 文件
第二步：import 系统包
第三步：自定义一个类继承自 StatefulWidget
第四步：实现一个需要 override 的方法 createState
到这里就有点不一样了。我们先看下目前的代码。
import 'package:flutter/material.dart'; class Increment extends StatefulWidget{ @override State<StatefulWidget> createState() { // TODO: implement createState return null; } }和 StatelessWidget 不一样，这里不是返回 Widget。
我们看下如何操作。
第五步：创建一个类继承 State
这里我们创建 _IncrementState 类继承 State
然后我们需要实现一个需要 override 的方法 build。
到这里是不是就是很熟悉了。
直接看代码：
import 'package:flutter/material.dart'; class Increment extends StatefulWidget{ @override State<StatefulWidget> createState() { return _IncrementState(); } } class _IncrementState extends State<Increment> { @override Widget build(BuildContext context) { // TODO: implement build return null; } }所以接下来的工作就是类似的。
第六步：实现 Widget
参考一开始的例子我们简单写出下面代码：
import 'package:flutter/material.dart'; class Increment extends StatefulWidget{ @override State<StatefulWidget> createState() { return _IncrementState(); } } class _IncrementState extends State<Increment> { int _count = 0; void _incrementCount() { setState(() { _count++; }); } @override Widget build(BuildContext context) { return _buildPage(); } Widget _buildPage() { return MaterialApp( home: Scaffold( body: Center( child : Text('$_count') ), floatingActionButton: FloatingActionButton( onPressed: _incrementCount, tooltip: 'Increment', child: Icon(Icons.add), ), ), ); } }这里面需要说明的是多了一个新的 Widget FloatingActionButton。
可以看到它是作为 Scaffold 自带的一个属性的。
FloatingActionButton 讲解：
onPressed 后面是这个按钮点击之后会回调的一个方法。
tooltip 是长按之后会显示的提示文字。
child 是这个按钮显示的图标。
我们修改 main.dart 文件如下，看下效果：
import 'package:flutter/material.dart'; import 'increment.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Increment(); } }效果如下：
这里重点的代码是下面：
setState(() { _count++; });它表示将数字加一之后更新界面。
需要更新界面时需要调用 setState 方法。
更新数据源可以在 setState 方法里面写。
5. StatefulWidget 通用模板FileName为你文件名的驼峰形式，_FileNameState 里面的 FileName 也是哦~
import 'package:flutter/material.dart'; class FileName extends StatefulWidget{ @override State<StatefulWidget> createState() { return _FileNameState(); } } class _FileNameState extends State<FileName> { @override Widget build(BuildContext context) { return _buildPage(); } Widget _buildPage() { //TODO build your widget } }到了这里你回过头去看新建 Flutter 项目时自动创建的 main.dart 文件就看得懂了。
6. StatelessWidget vs StatefulWidget好了，上面讲解完了 StatelessWidget 和 StatefulWidget，相信大家应该知道如何自定义一个 Widget 了，也知道如何在其他页面引入了。
但是我们实际上在使用的时候到底是要继承 StatelessWidget 还是 StatefulWidget 呢？
其实根据名称可以看出取决于你这个 Widget 是有状态还是无状态？
不过「状态」这个词也不是好理解。
所以笔者是这样来区分使用 StatelessWidget 还是 StatefulWidget的？
看界面是否需要更新
比如我们上面的例子，点击按钮文本更新了，所以我们选择了 StatefulWidget。
而第一个只是字体调整，界面渲染之后不再需要更新了，所以我们选择了 StatelessWidget。
所以我们可以认为当界面需要更新时，我们的自定义 Widget 就要继承 StatefulWidget 而不是 StatelessWidget。