Flutter在登录时显示微调框 [英] Flutter show spinner on login

问题描述

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

Newbie to Flutter. I am trying to create a simple login page which does an authentication on button click using the BLOC architecture pattern.

除了一件事情外，我大部分工作都是正常的：

I have most of the piece working except one thing:

1. 如何显示 CircularProgressIndicator 在登录过程中位于应用程序中央，然后在登录完成后将其关闭（无论呼叫成功还是失败）？

1. How do I display a CircularProgressIndicator in the center of the app while the login is in progress and then dismiss it once it's complete (irrespective if the call is a success or failure)?

我看到了一些矛盾的答案，有人建议使用 Streams ， Future 或 FutureBuilder 。

I am seeing conflicting answers where some are recommending usage of Streams, Future or 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: "[e-mail]",
      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)),
      ),


    );

请注意，我正在尝试显示本机微调器。
谢谢！

Kindly note that I am trying to show a native spinner. Thanks!

推荐答案

您创建了一个新变量：

bool checkLoginFinish = false;

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

your login function is a async function. You can use "then" after "whenComplete" .

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

然后，如果checkFinish为false，则显示CircularProgressIndicator，否则显示并进入新页面。 / p>

Then if checkFinish is false, show CircularProgressIndicator, if not don't show and go to the new page.

return checkLoginFinish ? LoginPage() : CircularProgressIndicator();

这篇关于Flutter在登录时显示微调框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！