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

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;
}
}