onPressed内部的FuuBuilder不会更新UI

Question

我正在开发一个带有抖动的登录表单。当用户单击submit按钮时，它将与Firebase Auth连接以查看凭据并登录用户。在此之前，我需要向用户显示CircularProgressBar。要查看登录过程是否完成，我正在使用FutureBuilder。下面是我的代码

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

class LoginPage extends StatelessWidget {
  LoginPage() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                  colors: [
                Color.fromRGBO(11, 51, 83, 90),
                Color.fromRGBO(4, 18, 30, 1)
              ])),
          child: LoginForm()),
    );
  }
}

class LoginForm extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return LoginFormState();
  }
}

class LoginFormState extends State<LoginForm> {
  final _formKey = GlobalKey<FormState>();
  final FirebaseAuth _auth = FirebaseAuth.instance;

  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return ListView(
      children: <Widget>[
        Container(
          child: _buildLogo(),
          margin:
              EdgeInsets.only(top: MediaQuery.of(context).size.height * 0.20),
        ),
        Container(
          child: _buildForm(),
          margin: EdgeInsets.only(left: 10, right: 10, top: 83),
        )
      ],
    );
  }

  Widget _buildLogo() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Image.asset(
          "assets/images/logo.png",
          fit: BoxFit.fill,
        )
      ],
    );
  }

  Widget _buildForm() {
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Flexible(
                flex: 1,
                child: Container(
                    child: Icon(
                      Icons.person,
                      color: Colors.white,
                    ),
                    // child: ImageIcon(
                    //   AssetImage("assets/images/email_24px.png"),
                    //   color: Colors.white,
                    // ),
                    margin: EdgeInsets.only(right: 5, bottom: 10)),
              ),
              Flexible(
                  flex: 7,
                  child: SizedBox(
                    height: 60,
                    child: TextFormField(
                      controller: emailController,
                      validator: (value) {
                        if (value.isEmpty) {
                          return 'Please enter some text';
                        }
                        return null;
                      },
                      decoration: InputDecoration(
                        filled: true,
                        fillColor: Colors.white,
                        contentPadding:
                            const EdgeInsets.only(top: 2, bottom: 2, left: 8),
                        border: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(30.0),
                        ),
                        hintText: "Email",
                      ),
                    ),
                  ))
            ],
          ),
          Container(
            margin: EdgeInsets.only(top: 25),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Flexible(
                  flex: 1,
                  child: Container(
                    child: Icon(Icons.lock, color: Colors.white),
                    margin: EdgeInsets.only(right: 5, bottom: 10),
                  ),
                ),
                Flexible(
                    flex: 7,
                    child: SizedBox(
                      height: 60,
                      child: TextFormField(
                        controller: passwordController,
                        validator: (value) {
                          if (value.isEmpty) {
                            return 'Please enter some text';
                          }
                          return null;
                        },
                        decoration: InputDecoration(
                          filled: true,
                          fillColor: Colors.white,
                          contentPadding:
                              const EdgeInsets.only(top: 2, bottom: 2, left: 8),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(30.0),
                          ),
                          hintText: "Password",
                        ),
                      ),
                    ))
              ],
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                FlatButton(
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  child: Text(
                    "Forgot Password?",
                    style: Theme.of(context).textTheme.body1,
                  ),
                  onPressed: () {},
                ),
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 40, left: 25, right: 10, bottom: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Flexible(
                    child: SizedBox(
                  width: double.infinity,
                  height: 40,
                  child: RaisedButton(
                    color: Color.fromRGBO(0, 72, 128, 100),
                    textColor: Colors.white,
                    shape: RoundedRectangleBorder(
                        borderRadius: new BorderRadius.circular(18.0),
                        side:
                            BorderSide(color: Color.fromRGBO(0, 72, 128, 100))),
                    child: Text(
                      "LOGIN",
                      style: Theme.of(context).textTheme.button,
                    ),
                    onPressed: () {
                      if (_formKey.currentState.validate()) {
                        FutureBuilder(
                          future:
                              Provider.of<AuthService>(context, listen: false)
                                  .signInWithEmail(emailController.text,
                                      passwordController.text),
                          builder:
                              (BuildContext context, AsyncSnapshot snapshot) {
                            if (snapshot.connectionState == ConnectionState.done) {
                              Navigator.pushNamed(context, "/home");
                            } else {
                              _scaffoldKey.currentState.showSnackBar(SnackBar(
                                duration: Duration(seconds: 4),
                                content: Row(
                                  children: <Widget>[
                                    new CircularProgressIndicator(),
                                    new Text("  Signing-In...")
                                  ],
                                ),
                              ));
                            }
                          },
                        );
                        // signInWithEmail("[email protected]","test123");
                      }
                    },
                  ),
                ))
              ],
            ),
          )
        ],
      ),
    );
  }

  Future<String> signInWithEmail(String email, String password) async {
    FirebaseUser user;

    try {
      AuthResult result = await _auth.signInWithEmailAndPassword(
          email: email, password: password);
      user = result.user;

      if (user != null) {
        print("SIgn in success: " + user.email);
      } else {
        print("sign in failed");
      }
    } catch (e) {
      print(e.toString());
    }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void dispose() {
    emailController.dispose();
    passwordController.dispose();

    super.dispose();
  }
}

按下按钮时，我可以看到用户已登录，但看不到CircularProgress或没有被定向到home页面。

这是为什么？

Answer 1

尝试以下操作：

                        FutureBuilder(
                          future:
                              Provider.of<AuthService>(context, listen: false)
                                  .signInWithEmail(emailController.text,
                                      passwordController.text),
                          builder:
                              (BuildContext context, AsyncSnapshot snapshot) {
                            if (snapshot.connectionState == ConnectionState.done) {
                              Navigator.pushNamed(context, "/home");
                            } else {
                              _scaffoldKey.currentState.showSnackBar(SnackBar(
                                duration: Duration(seconds: 4),
                                content: Row(
                                  children: <Widget>[
                                    new CircularProgressIndicator(),
                                    new Text("  Signing-In...")
                                  ],
                                ),
                              ));
                            }
                            return  new CircularProgressIndicator();
                          },
                        );

如果在其他情况下添加return new CircularProgressIndicator，则应在开头显示圆形指示器，然后在完成future时将输入if