Flutter Progress Button 带进度的 But

在本文中，我将向您解释如何在Flutter中创建进度按钮。
“进度”按钮是一个普通按钮，但是当您单击它时。 它将显示进度，以便用户知道某些进程正在运行。

先上图看效果：

progress_button.gif

开撸代码

第一步：
创建 有状态 widget，相信很多小伙伴都信手拈来了，不多说了，build 方法如下代码：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("用户体验"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.orange,
          padding: const EdgeInsets.symmetric(vertical: 2.0),
          child: Text(
            "CLICK ME",
            style: TextStyle(color: Colors.white),
          ),
          onPressed: () {},
        ),
      ),
    );
  }

这个很简单了;

第二步：
RaisedButton 是一个无状态的组件，那么并不好处理他的状态。。。
要实现 GIF 所示的效果，其实思路就是根据啥啥啥来显示不同的 widget，比如我设置一个 布尔值，TRUE 则显示 文案 widget，FALSE 则显示进度条 widget，这就是原理。
所以我在 _ProgressState 中定义了一个变量 _state, 用来做一个门，控制着 RaisedButon 上的不同的 widget 展示，默认为 0，那么就显示 文案，当点击的时候，要是 _state = 0, 则切换为 进度条，负责就直接 return 掉啦。
代码中用 Timer 模拟了 3s 的延时，显示效果。思路说了，直接看代码就行了😆😆😆😆

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("用户体验"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.orange,
          padding: const EdgeInsets.symmetric(vertical: 2.0),
          child: _setUpChild(),
          onPressed: () {
            setState(() {
              if (_state == 0) {
                animateProgress();
              } else {
                return;
              }
            });
          },
        ),
      ),
    );
  }

 Widget _setUpChild() {
    if (_state == 0) {
      return Text("CLICK ME", style: TextStyle(color: Colors.white),);
    } else if (_state == 1) {
      return SizedBox(width: 16,height: 16,child: CircularProgressIndicator(),);
    } else {
      return null;
    }
  }

  void animateProgress() {
    setState(() {
      _state = 1;
    });
    setState(() {
      Timer(Duration(milliseconds: 3000), () {
        setState(() {
          _state = 0;
        });
      });
    });
  }

完整代码如下：

class ProgressButton extends StatefulWidget {
  @override
  _ProgressButtonState createState() => _ProgressButtonState();
}

class _ProgressButtonState extends State<ProgressButton> {
  var _state = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("用户体验"),
      ),
      body: Center(
        child: RaisedButton(
          color: Colors.orange,
          padding: const EdgeInsets.symmetric(vertical: 2.0),
          child: _setUpChild(),
          onPressed: () {
            setState(() {
              if (_state == 0) {
                animateProgress();
              } else {
                return;
              }
            });
          },
        ),
      ),
    );
  }

  Widget _setUpChild() {
    if (_state == 0) {
      return Text(
        "CLICK ME",
        style: TextStyle(color: Colors.white),
      );
    } else if (_state == 1) {
      return SizedBox(
        width: 16,
        height: 16,
        child: CircularProgressIndicator(
          strokeWidth: 2,
        ),
      );
    } else {
      return null;
    }
  }

  void animateProgress() {
    setState(() {
      _state = 1;
    });
    setState(() {
      Timer(Duration(milliseconds: 3000), () {
        setState(() {
          _state = 0;
        });
      });
    });
  }
}

最后说，为什么要用 int 来做门进行判断？你知道吗？