Can't read data from Firestore from Flutter Web (works on iOS and android)

flutter dart google-cloud-firestore flutter-web

276

Found a solution here Stackoverflow: Flutter Web - Fetching Firestore collection

Apparently using version 8.3.0 was the problem. Use 7.14.4 instead

276

Author by

jeffmayn

Computer Scientist

Updated on December 28, 2022

Comments

jeffmayn over 1 year

In my application I can log in (using firebase auth) on both iOS, android and web. When I try reading from Firestore database using a streambuilder, then it only works in iOS and android. In the web-part it goes straight to the else-clause of snaps.HasData.

My index.html-file (firebaseConfig removed obviously):

   <body>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-functions.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-messaging.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-analytics.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-storage.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-remote-config.js"></script>
    
    <script>
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      var firebaseConfig = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        projectId: "",
        storageBucket: "",
        messagingSenderId: "",
        appId: "",
        measurementId: ""
      };
      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
      firebase.analytics();
    </script>
      <!-- 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('flutter-first-frame', function () {
            navigator.serviceWorker.register('flutter_service_worker.js');
          });
        }
      </script>
      <script src="main.dart.js" type="application/javascript"></script>
    </body>

My dashboard-screen when logged in. In my console i get the print "enters streambuilder" but not the print "snapshot has data":

return Scaffold(
      key: _scaffoldKey,
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(70.0),
        child: AppBar(
          title: Padding(
            padding: const EdgeInsets.only(top: 10.0),
            child: StreamBuilder<List<Users>>(
                stream: database.users(),
                builder: (context, snapshot) {
                  print("enters streambuilder");
                  if (snapshot.hasData) {
                    print("snapshot has data");
                    final users = snapshot.data;
                    if (users.isNotEmpty) {
                      print("users is not empty");
...

These are my pubspec.yaml dependencies:

environment:
  sdk: ">=2.2.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter

  firebase_core_platform_interface: 4.0.0
  firebase_storage_web: 1.0.0
  firebase_auth_web: 1.0.0
  firebase_core: 1.0.1
  firebase_core_web: 1.0.1
  firebase_storage: 8.0.0
  firebase_messaging: 9.0.0
  firebase_dynamic_links: ^0.5.0+11
  firebase_auth: 1.0.0
  cloud_firestore: 1.0.0
  cloud_firestore_web: 1.0.1
...

Am I missing any dependencies? Cant figure out why I can't read the data from firestore. Ive double checked that the firebaseConfig settings are correctly setup with my project settings in firebase.