【问题标题】：Firebase + Flutter + Web Having No DataFirebase + Flutter + Web 没有数据
【发布时间】：2020-06-13 18:55:25
【问题描述】：

1。问题

我正在尝试将我的 Flutter 应用程序（到目前为止，它在 Android 和 iOS 上运行良好，具有测试和模拟功能）集成到网络上，但是，尽管遵循了 HTML 配置和其他教程，并且我的简单身份验证应用程序运行良好总的来说，我知道没有数据到达它。我的快照有snapshot.hasData == false，它的connectionState 是ConnectionState.waiting。

2。守则

除了这种奇怪的无数据行为之外，我没有任何错误。我的index.html 文件是这样配置的：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="feedbacker">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>

  <title>feedbacker</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
        application. For more information, see:
        https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <!-- Firebase -->

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
  https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = { ... }; // copy-paste from Firebase's configuration setup
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

  <script src="main.dart.js"></script>
</body>
</html>

3。附加信息

我尝试了firebasejs' 版本的许多变体，但都没有奏效，尤其是最新版本。

我正在使用的相关软件包的版本是：

firebase_auth: ^0.15.2
google_sign_in: ^4.5.1
flutter_facebook_login: ^3.0.0

google_sign_in 和 flutter_facebook_login 是可选工作流，它们也不起作用。

我无法在此处分享整个应用程序，因为那里的内容太多。考虑到我现在遇到的问题，我应该一开始就将它移植到网络上，虽然我当时不知道 Flutter 支持它。

【问题讨论】：

您说您尝试了各种版本的 firebasejs - 但它们都不起作用 - 他们是否给出了错误？另外，为什么你更喜欢 7.5 版而不是 7.15 版？
我也尝试过 7.15。上面的示例来自我尝试过的最低版本，没有具体原因。通过flutter run -d chrome 运行应用程序时，我在终端上没有收到任何错误消息（web-server 选项也不起作用），这使调试变得更加烦人。
@PhilippeFanaro 你有没有想过这个问题？
不行，我发帖一个月后又试了一次，还是不行。

标签： firebase flutter web dart firebase-authentication

【解决方案1】：

我相信我已经完成了这项工作。

void main() async {
  // Ensure setup is finished before running app.
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();

  runApp(MyApp());
}

class Globals {
  static FirebaseAuth auth;
  static User user;
}

class Routes {
  static final String signinScreen = 'signinScreen';
  static final String appScreen = 'appScreen';
  static final String loadingScreen = 'loadingScreen';
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      routes: {
        Routes.signinScreen: (context) => SigninScreen(),
        Routes.appScreen: (context) => AppScreen(),
        Routes.loadingScreen: (context) => LoadingScreen(),
      },
      initialRoute: Routes.loadingScreen,
    );
  }
}

加载屏幕：

@override
void initState() {
  super.initState();
  // Initialize Firebase Authentication.
  // I use a global variable so I can access it everywhere.
  Globals.auth = FirebaseAuth.instance;
}

@override
Widget build(BuildContext context) {
  return StreamBuilder<User>(
    // Listen to the auth stream from Firebase.
    stream: FirebaseAuth.instance.authStateChanges(),
    builder: (BuildContext context, AsyncSnapshot<User> snapshot) {
      // Wait for the stream to be active.
      if (snapshot.connectionState == ConnectionState.active) {
        // Check if there is a user.
        // If yes, start the app; if no, start the sign in screen.
        // On web this always comes up null, so we get to the sign in screen.
        if (FirebaseAuth.instance.currentUser != null) {
          return AppScreen();
        } else {
          return SigninScreen();
        }
      }
      return Container(child: CircularProgressIndicator());
    },
  );
}

登录屏幕：


@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((_) => _checkIfSignedIn());
}

// Workaround because the initial StreamBuilder
// always returns null on the web version.
// May have something to do with this bug that was just fixed,
// but will need verification:
// https://github.com/FirebaseExtended/flutterfire/pull/4312
void _checkIfSignedIn() async {
  // Slight delay for any potential user info to actually populate.
  // We can't do this directly in the StreamBuilder since it
  // doesn't work with async.
  await Future.delayed(Duration(milliseconds: 500));
  // **Now** check if there is a logged in user.
  if (FirebaseAuth.instance.currentUser != null) {
    print('User is logged in, moving to main app screen.');
    // Replace `Routes.appScreen` with your desired app screen.
    Navigator.pushReplacementNamed(context, Routes.appScreen);
  } else {
    // No saved user loaded, so continue normal sign in.
    print('User not logged in.');
  }
}

我已经为此奋斗了好几天，部分原因是没有完整的示例或答案；因此，对于可能遇到此问题的其他任何人，我都尽量做到完整。

【讨论】：