Flutter 在登录时显示微调器

Question

Flutter 的新手。
我正在尝试创建一个简单的登录页面，该页面使用 BLOC 对按钮单击进行身份验证架构模式。

除了一件事，我的大部分工作都在工作:

如何显示 CircularProgressIndicator在登录过程中位于应用程序的中心，然后在完成后将其关闭(无论调用是成功还是失败)？

我看到一些相互矛盾的答案，有些人建议使用 Streams , Future或 FutureBuilder .

我的构建方法:

@override
  Widget build(BuildContext context) {
    final logo = Hero(
      tag: 'hero',
      child: CircleAvatar(
        backgroundColor: Colors.transparent,
        radius: 48.0,
        child: Image.asset('assets/images/logo.png'),
      ),
    );

    final email = TextFormField(
      controller: _usernameController,
      keyboardType: TextInputType.emailAddress,
      autofocus: false,

    //  initialValue: "hello@world.com",
      validator: _validateEmail,
      decoration: InputDecoration(
        hintText: 'Email',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final password = TextFormField(
      autofocus: false,
      controller: _passwordController,
      obscureText: true,
      //initialValue: "12345",
      decoration: InputDecoration(
        hintText: 'Password',
        contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
      ),
    );

    final loginButton = Padding(
      padding: EdgeInsets.only(left:16, right: 16, top: 16, bottom: 5),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(24),
        ),
        onPressed: () {

        bloc.fetchLoginDetails(_usernameController.text,_passwordController.text).then((result){

            if(result != null && result is UserLoginModel){
              //Navigator.of(context).pushNamed(HomePage.tag);
              Navigator.push(context,    MaterialPageRoute(
                builder: (context) => HomePage(name: result.response.username),
              ));
            }else {
              _showDialog(result as UserLoginErrorModel);
            }


          });
        },

        padding: EdgeInsets.only(left:12, right: 12),
        color: Colors.lightBlueAccent,
        child: Text('Log In', style: TextStyle(color: Colors.white)),
      ),


    );

请注意，我正在尝试展示一个本地微调器。
谢谢!

Answer 1

您创建一个新变量:

bool checkLoginFinish = false;

您的登录功能是异步功能。您可以在 "whenComplete"之后使用 "then"。

bloc.fetchLoginDetails(_usernameController.text,_passwordController.text).then((result
{
.....
}).whenComplete((){
   setState(() {
      checkLoginFinish = true;
    });
});

然后如果 checkFinish 为 false，则显示 CircularProgressIndicator，如果不是，则不显示并转到新页面。

return checkLoginFinish ? LoginPage() : CircularProgressIndicator();