如何在 Flutter 转换之间显示进度轮/进度条？

Question

我创建了一个自定义登录页面，它的外观和工作方式都符合我的预期。在验证 Firebase 用户并提取用户名、照片或占位符时，我无法确定在代码中如何以及在何处显示进度指示器。此外，如果身份验证失败，应在何处以及如何显示警报。这是我当前的代码...

Future<Null> _loginButton() async {
    _email = _emailController.text.toString().replaceAll(" ", "");
    _password = _passController.text.toString().replaceAll(" ", "");
    //_username = _nameController.text.toString().replaceAll(" ", "");
    if (_email != null && _password != null) {
      try {
        await FirebaseAuth.instance
            .signInWithEmailAndPassword(email: _email, password: _password);

        final FirebaseUser currentUser = await _auth.currentUser();
        final userid = currentUser.uid;
        currentUserId = userid;


        FirebaseDatabase.instance
            .reference()
            .child('users/$userid')
            .onValue
            .listen((Event event) {
          if (event.snapshot.value == null) {
            imageString = "placeholder";
            name = _username;
          } else if (event.snapshot.value != null) {
            imageString = event.snapshot.value['image'];
            name = event.snapshot.value['displayName'];
          }

          fb.child('users/$userid').set({
            'displayName': name,
            'image': imageString,
            'uid' : userid.toString()
          });
        }).onDone(() {
          Navigator.pushNamed(context, '/menu');
          Main.uid = userid;
        });
      } catch (error) {

      }
    } else {}
  } 

Answer 1

查看我项目中的一个功能示例，以在颤动转换之间实现 CircularProgressIndicator。

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  bool isLoading = false;

  @override
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: isLoading
                ? Column(
                    children: <Widget>[
                      CircularProgressIndicator(),
                      Divider(
                        height: 20,
                        color: Colors.transparent,
                      ),
                      Text("Please wait..."),
                    ],
                    mainAxisSize: MainAxisSize.min,
                  )
                : MaterialButton(
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: <Widget>[
                        Image.asset(
                          'assets/google.png',
                          width: 25.0,
                        ),
                        Padding(
                          child: Text(
                            "Sign in with Google",
                            style: TextStyle(
                              fontFamily: 'Roboto',
                              color: Color.fromRGBO(68, 68, 76, .8),
                            ),
                          ),
                          padding: new EdgeInsets.only(left: 15.0),
                        ),
                      ],
                    ),
                    onPressed: () {
                      googleUserSignIn().then((user) {
                        this.setState(() {
                          //isLoading = false;
                          // Your task....
                        });
                      });
                    },
                    color: Colors.white,
                    elevation: 5,
                    highlightElevation: 2,
                  )));
  }

  Future<FirebaseUser> googleUserSignIn() async {
    this.setState(() {
      isLoading = true;
    });

    GoogleSignInAccount googleUser = await Firebase().firebaseGSI.signIn();

    GoogleSignInAuthentication googleAuth = await googleUser.authentication;

    final AuthCredential credential = GoogleAuthProvider.getCredential(
      accessToken: googleAuth.accessToken,
      idToken: googleAuth.idToken,
    );

    FirebaseUser user =
        await Firebase().firebaseAuth.signInWithCredential(credential);

    return user;
  }
}