到这里就有点不一样了。我们先看下目前的代码。

import 'package:flutter/material.dart';

class Increment extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return null;
  }

}

和 StatelessWidget 不一样，这里不是返回 Widget。

我们看下如何操作。

第五步：创建一个类继承 State< T extends StatefulWidget>

这里我们创建 _IncrementState 类继承 State< Increment>，这里尖括号<>里面的类型就是我们一开始写的继承自 StatefulWidget 的类 Increment。

然后我们需要实现一个需要 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。

更多阅读：
Flutter 即学即用系列博客——01 环境搭建
Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
Flutter 即学即用系列博客——04 Flutter UI 初窥