Перейдите на страницу после регистрации пользователя в приложении android во флаттере с помощью FirebaseAuth

Question

Я работаю над аутентификацией телефона с использованием flutter и firebase. Итак, когда пользователь «Зарегистрируйтесь или зарегистрируйтесь» для приложения, получен одноразовый пароль, а затем, когда он нажимает кнопку «Войти», номер телефона сохраняется в firebase, но страница не загружается. После нажатия кнопки «Войти» учетная запись создается, но страница не меняется, и мне нужно закрыть приложение и снова открыть его, и отобразится главная страница. Подскажите, пожалуйста, как это сделать.

Код для "Class SignUpView":

class SignUpView extends StatefulWidget {
  @override
  _SignUpViewState createState() => _SignUpViewState();
}

class _SignUpViewState extends State<SignUpView> {

  final formKey = new GlobalKey<FormState>();

  String phoneNo, verificationId, smsCode;

  bool codeSent = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.only(left: 25, right: 25),
              child: TextFormField(
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(hintText: "Enter Phone Number"),

                onChanged: (val) {
                  setState(() {
                    this.phoneNo = val;
                  });
                },
              ),
            ),


           codeSent ? Padding(
              padding: EdgeInsets.only(left: 25, right: 25),
              child: TextFormField(
                keyboardType: TextInputType.phone,
                decoration: InputDecoration(hintText: "Enter OTP"),

                onChanged: (val) {
                  setState(() {
                    this.smsCode = val;
                  });
                },
              ),
           ): Container(),




            Padding(
              padding: EdgeInsets.only(left: 25, right: 25),
              child: RaisedButton(
                child: Center(
                  child: codeSent ? Text("Login") : Text("Login"),
                ),
                onPressed: () {
                  codeSent? AuthService().signInWithOTP(smsCode, verificationId):verifyPhone(phoneNo);
                  },
              ),
            ),

          ],
        ),
      ),
    );
  }

  Future<void> verifyPhone(phoneNo) async {
    final PhoneVerificationCompleted verified = (AuthCredential authResult) {
      AuthService().signIn(authResult);
    };

    final PhoneVerificationFailed verificationFailed = (
        AuthException authException) {
      print('${authException.message}');
    };

    final PhoneCodeSent smsSent = (String verId, [int forceResend]) {
      this.verificationId = verId;
      setState(() {
        this.codeSent = true;
      });
    };

    final PhoneCodeAutoRetrievalTimeout autoTimeOut = (String verId) {
      this.verificationId = verId;
    };


    await FirebaseAuth.instance.verifyPhoneNumber(
        phoneNumber: phoneNo,
        timeout: const Duration(seconds: 5),
        verificationCompleted: verified,
        verificationFailed: verificationFailed,
        codeSent: smsSent,
        codeAutoRetrievalTimeout: autoTimeOut);
  }
}

Часть кода, куда мне нужно добавить навигацию:

 onPressed: () {
                  codeSent? AuthService().signInWithOTP(smsCode, verificationId):verifyPhone(phoneNo);
}

Есть еще одна часть кода - Class AuthService:

class AuthService {

  handleAuth() {
    return StreamBuilder(
      stream: FirebaseAuth.instance.onAuthStateChanged,
      builder: (BuildContext context, snapshot) {
        if(snapshot.hasData) {
          return Home_Page();
        }
        else {
          return first_screen();  //Login();
        }
      },
    );
  }

  signOut() {
    FirebaseAuth.instance.signOut();
  }

  signIn(AuthCredential authCreds) {
    if(authCreds != null){
      FirebaseAuth.instance.signInWithCredential(authCreds);
    }    
  }

  signInWithOTP(smsCode, verId) {
    AuthCredential authCreds = PhoneAuthProvider.getCredential(verificationId: verId, smsCode: smsCode);
    signIn(authCreds);

  }

}

Пробовал добавить навигацию внутри:

onPressed: () {
                  codeSent? AuthService().signInWithOTP(smsCode, verificationId):verifyPhone(phoneNo);
Navigator.of(context).pushReplacementNamed('/create_account');
}

Но это не сработало, так как приведенный выше код переместится на страницу, и учетная запись не будет создана.

Я хочу, чтобы, когда пользователь вводил OTP, а затем нажимал кнопку входа, затем его номер телефона должен пройти проверку, и учетная запись должна быть создана на firebase, а затем пользователю должна быть отображена другая страница. Вы можете использовать: Navigator.of (context) .pushReplacementNamed ('/ create_account'); или Account_setup_page () для отображения страницы.

Я бы действительно буду благодарен за всю помощь, которую я могу получить.

Answer 1

Прежде всего вам необходимо настроить поток для изменений аутентификации в вашем классе AuthService, т.е.

Stream<FirebaseUser> get user {
     return _auth.onAuthStateChanged; 
}

Затем на главном экране (лучше в виджете-оболочке) вы можете прослушивать этот поток, поэтому если пользователь вошел в систему, он будет перенаправлен на главный экран, иначе он будет перенаправлен на экран входа. Это можно сделать с помощью следующего кода:

final user = Provider.of<FirebaseUser>(context); // listener for auth state
if (user == null) {
     return SignUpView();  // or the sign in view
} else {
     return Home(user: user,);  
     // home screen with the user as argument for easier access in the future
}

Возможно, в будущем, когда вы реализуете функцию выхода, этот фрагмент кода автоматически перенаправит пользователя на страницу входа