How to use Flutter (web app) stream builder with Firestore

Question

I see several questions and answers about Flutter for mobile that use stream builder like this:

body: new StreamBuilder(
  stream: Firestore.instance.collection("collection").snapshots(),
  builder: (context, snapshot) {
    ...

I'm trying to do the same on flutter for the web, but in my configuration, the snapshots() method is unknown, generating an exception while running (and a vscode warning beforehand). Why? Do I have an incorrect setup?

I've followed these steps which I found here and elsewhere:

1) Included firebase as a dependency in pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  firebase: ^6.0.0

2) Included the firestore js scripts in the index.html body tag:

<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<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-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>

3) In main.dart, imported firebase.dart files (using advice given here, though I'm not exactly sure which step above got me access to this package. I'm a flutter nube, if it isn't obvious)

import 'package:flutter/material.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/firestore.dart' as fs;

Having followed these steps, I can get this code working....

void main() {
  if (fb.apps.length == 0) {
    try {
      fb.initializeApp(
        apiKey: "mike",
        authDomain: "myauthdomain",
        databaseURL: "mydburl",
        projectId: "myproductid",
        storageBucket: "mystoragebucket",
      );
    } catch(e) {
      print(e);
    }
  }

  fs.Firestore store = fb.firestore();
  fs.CollectionReference ref = store.collection("MyCollection");
  ref.onSnapshot.listen((querySnapshot) {
    querySnapshot.docs.forEach((doc) {
      print(doc.data());  // this works!!
    });
  });
  runApp(MyApp());
}

But, as I mentioned earlier, getting the stream builder working, all of the advice suggests that I can get a stream of snapshots by saying...

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new StreamBuilder(
      stream: fb.firestore().collection('MyCollection').snapshots(),
      ...

The packages I have running on web don't seem to have anything like the snapshots method (or property) on a firestore collection reference. Can somebody set me straight?

Answer 1

I had the same issue when I tried to create a web version of my flutter mobile app which uses a lot of StreamBuilders. The following works for me:

Pubspec.yaml dependencies:

  firebase_web: ^5.0.9
  firebase_core: ^0.4.3+2

In your code:

import 'package:firebase_web/firestore.dart';
import 'package:firebase_web/firebase.dart';

body: new StreamBuilder(
  stream: firestore().collection('collection').onSnapshot,
  builder: (context, snapshot) {
...

Below I have included a list with changes that I encountered so far going from a flutter mobile app to a flutter web app:

• documents = docs as in snapshot.data.docs.length
• documents() = doc() as in firestore().collection('foo').doc('bar')
• reference = ref as in snapshot.ref
• data = data() as in snapshot.data()
• The method setData from Firestore = set
• The method updateData from Firestore = update(data:{'yourKey': 'yourValue',})

Hope this can help!

Answer 2

The querySnapshot.docs property returns a List<DocumentSnapshot>, while you need a stream for the stream property where each item on the stream is a list.

I've only needed this with the FlutterFire libraries for iOS/Android, but it should look something like this:

Stream<List<DocumentSnapshot>> getStream() async* {
  fb.firestore().collection("MyCollection").onSnapshot.listen((querySnapshot) {
    yield querySnapshot.docs;
  }
}