如何在颤音过渡之间显示进度的车轮/栏

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

在我的项目中检查一个功能示例，以在flutter转换之间实现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;
  }
}