如何根据 Firebase Auth State 设置到特定页面的导航？

Question

我想创建一个授权检查以根据用户是否登录显示不同的屏幕。当用户登录时，应该向他显示 HomeScreen ()。当没有登录时，然后是登录页面，其代码附在下面如何将小部件正确放置在屏幕上？

class SignInScreen extends StatefulWidget {
  const SignInScreen({Key? key}) : super(key: key);

  @override
  _SignInScreenState createState() => _SignInScreenState();
}

class _SignInScreenState extends State<SignInScreen> {
  TextEditingController _passwordTextController = TextEditingController();
  TextEditingController _emailTextController = TextEditingController();
  late StreamSubscription<User?> user;
  void initState() {
    super.initState();
    user = FirebaseAuth.instance.authStateChanges().listen((user) {
      if(user == null) {

      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
              hexStringToColor("#a40606"),
              hexStringToColor("#d98324"),
            ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
        child: SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.fromLTRB(
                20, MediaQuery.of(context).size.height * 0.2, 20, 0),
            child: Column(
              children: <Widget>[
                logoWidget("images/news_icon.png"),
                const SizedBox(
                  height: 30,
                ),
                reusableTextField("Enter UserName", Icons.person_outline, false,
                    _emailTextController),
                const SizedBox(
                  height: 20,
                ),
                reusableTextField("Enter Password", Icons.lock_outline, true,
                    _passwordTextController),
                const SizedBox(
                  height: 5,
                ),
                forgetPassword(context),
                firebaseUIButton(context, "Sign In", () {
                  FirebaseAuth.instance
                      .signInWithEmailAndPassword(
                      email: _emailTextController.text,
                      password: _passwordTextController.text)
                      .then((value) {
                    Navigator.push(context,
                        MaterialPageRoute(builder: (context) => HomeScreen()));
                  }).onError((error, stackTrace) {
                    print("Error ${error.toString()}");
                  });
                }),
                signUpOption()
              ],
            ),
          ),
        ),
      ),
    );
  }

Answer 1

我假设您已经设置了初始屏幕，在该屏幕上您可以将导航到 HomeScreen 或 SignInScreen 的条件放在 initState()。

void initState() {
    super.initState();
    FirebaseAuth.instance.authStateChanges().listen((User? user) {
      if (user == null) {
        Navigator.push(
           context,
           MaterialPageRoute(builder: (context) => const SignInScreen()),
        );
      } else {
        Navigator.push(
           context,
           MaterialPageRoute(builder: (context) => const HomeScreen()),
        );
      }
    });
  }

此解决方案仅展示如何根据用户状态导航至特定屏幕。我推荐的是创建一个服务文件，您可以在其中放置 Flutter Auth 的必要逻辑。这里有一个 link 会有帮助：https://www.youtube.com/watch?v=mZYuuGAIwe4

如何根据 Firebase Auth State 设置到特定页面的导航？

How to set up navigation to a specific page base on FirebaseAuth State?

dart

firebase

firebase-authentication

flutter