加载动画

目标：在用户输入用户名密码之后点击“登录”按钮时，服务器认证的同时，显示一个加载动画，告知用户正在进行认证操作

登录页是一个StatefulWidget，因此，通过一个变量来标记当前是否是loading状态，如果是loading状态则在中心显示一个圆形的加载动画，在用户点击登录按钮的时候，设置loading值，触发视图重建。

class _LoginPageState extends State<LoginPage> {
  final _formKey = GlobalKey<FormState>();
  String _username, _password;
  bool _isObscure = true;
  Color _eyeColor;
  bool loading = false;
 
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    List<Widget> widgetList = [];
    widgetList.add(_buildScaffold(context));
    if (loading) {
      widgetList.add(Opacity(
        opacity: 0.6,
        child: ModalBarrier(
          color: Colors.black54,
        ),
      ));
      widgetList.add(Center(
        child: CircularProgressIndicator(),
      ));
    }
    return Stack(
      children: widgetList,
    );
  }

 在用户登录时，设置状态机的值：

_doLogin(BuildContext context) {
    if (_username == 'admin' && _password == 'admin') {
      Global.currentLoginUser = _username;
      Global.currentLoginStatus = "active";
      Navigator.push(
        context,
        new MaterialPageRoute(builder: (context) => new CodeScanPage()),
      );
    } else {
      setState(() {
        loading = true;
      });
      //TODO Login
    }
  }

 未触发登录和触发登录时的效果对比：