Flutter - 如何使用 Firebase 拥有动态主页？答案

【问题标题】：Flutter - How to have A Dynamic Home Page by using Firebase?Flutter - 如何使用 Firebase 拥有动态主页？
【发布时间】：2018-12-23 04:08:36
【问题描述】：

我是 Flutter 和 Firebase 的新手，正在开发一个身份验证应用程序。如果用户已经登录，如何让应用程序转到主页，或者如果没有用户登录，如何让应用程序转到登录页面？原谅我生锈的代码。

FirebaseAuth auth = Firebase.instance;
void main() {

  Future<bool> home() async {
    if (await auth.currentUser() == null) {
      return false;
    }
    return true;
  }

  runApp(
    new MaterialApp(
      title: 'DASH',
      home: home() == null ? LoginScreen() : HomeScreen(),
      theme: DashTheme.theme,
      color: DashTheme.white,
      routes: <String, WidgetBuilder>{
      // Set routes for using the Navigator.
       '/home': (BuildContext context) => new HomeScreen(),
       '/login': (BuildContext context) => new LoginScreen(),
      },
    ),
  );
}

【问题讨论】：

标签： android firebase firebase-authentication flutter

【解决方案1】：

虽然我从来没有用Dart 语言写过任何东西，但我可以看到你写了一些好的开头。如果我们看一下这一行：

home: home() == null ? LoginScreen() : HomeScreen(),

如果用户已登录，则您正在检查home()。但是，您正在检查返回值是否为null，而方法的返回对象为Future<bool>。（这意味着在这种情况下，条件始终为false）。

还要注意这个方法是async。这意味着您不会真正知道该方法何时真正执行完毕。（这将是未来的某个时刻。

话虽如此，您应该在应用启动后显示一个初始页面。然后你应该运行并检查未来方法的返回值。根据文档 (https://www.dartlang.org/tutorials/language/futures)，可以这样做：

// Call this after the initialization of your app and pages

final future = home();
future.then((isLoggedIn) => ); // Inside here you need to do a navigation to the homepage or loginpage

【讨论】：

bool isLoggedIn; final future = home(); future.then((isLoggedIn) => false); home: isLoggedIn ? HomeScreen() : LandingScreen(),

【解决方案2】：

您的代码需要稍作修改。

您可以在 initState() 函数中检查用户，而不是像那样在主函数中检查当前用户。

@override
  void initState()
  {
    super.initState();

    final FirebaseAuth _auth = FirebaseAuth.instance;
    if(_auth.currentUser() == null)
    {
       Navigator.of(context).pushNamedAndRemoveUntil("/LoginScreen" , (Route<dynamic> route) => false);
    }
    else
    {
      Navigator.of(context).pushNamedAndRemoveUntil("/HomeScreen" , (Route<dynamic> route) => false);
    }

  }

pushNamedAndRemoveUntil 用于如果您不希望用户返回上一个场景或路线。

您可以在 Flutter here 中阅读有关导航的信息。并使用您需要的那个。

【讨论】：

谢谢。现在如何将它传递到 Material App 小部件的主页？
好吧，我建议不要将动态屏幕传递给 Home，而是可以使用简单的加载屏幕作为主屏幕，甚至是启动屏幕，然后在那。稍后当您知道结果（如果用户是新用户或不是新用户）时，您可以根据结果路由到新屏幕。因为主页通常是用户第一次进入时的屏幕，所以简单的加载屏幕或启动屏幕会很好。我希望你明白我的意思:)

【解决方案3】：

非常感谢您的所有回答。我正在检查答案，这就是我遇到的。我不知道这是否是正确的做法，但它确实有效。代码如下：

Widget _getLandingPage() {
return StreamBuilder<FirebaseUser>(
  stream: FirebaseAuth.instance.onAuthStateChanged,
  builder: (BuildContext context, snapshot) {
    if (snapshot.hasData) {
      if (snapshot.data.providerData.length == 1) {
        return snapshot.data.isEmailVerified ? HomeScreen() : VerifyEmailScreen();
      } else {
        return HomeScreen();
      }
    } else {
      return LoginScreen();
    }
  },
);

}

home: _getLandingPage(),

【讨论】：

【解决方案4】：

我正在使用 Future Builder

 Widget _getLandingPage() {
return FutureBuilder<FirebaseUser>(
  future: FirebaseAuth.instance.currentUser(),
  builder: (BuildContext context, AsyncSnapshot<FirebaseUser> snapshot){
    if (GlobalStore.state.userConfig != null && GlobalStore.state.userConfig.isDisplayIntroScreen == true) {
      return routes.buildPage('intro_screen', null);
    }

    if (snapshot.hasData) {
      return routes.buildPage('main', null);
    } else {
      return routes.buildPage('auth', null);
    }
  },);

home: _getLandingPage(),

【讨论】：