Flutter Firestore read an array from firestore - firebase

Question

I'm trying to use a StreamBuilder in conjunction with a ListView.builder to display data stored in an array on firebase.
I've tried using the code below to access the array but I really don't know what I'm doing wrong.
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return StreamBuilder<List<Beacon>>(
stream: DatabaseService().beacons,
builder: (context, snapshot) {
return BeaconList(),
}
);
}
}
class BeaconList extends StatefulWidget {
#override
_BeaconListState createState() => _BeaconListState();
}
class _BeaconListState extends State<BeaconList> {
#override
Widget build(BuildContext context) {
final beacons = Provider.of<List<Beacon>>(context) ?? [];
return ListView.builder(
itemCount: beacons.length,
itemBuilder: (context, index) {
return BeaconTile(beacon: beacons[index]);
},
);
}
}
class BeaconTile extends StatefulWidget {
final Beacon beacon;
BeaconTile({this.beacon});
#override
_BeaconTileState createState() => _BeaconTileState();
}
class _BeaconTileState extends State<BeaconTile> {
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 8),
child: Card(
margin: EdgeInsets.fromLTRB(20, 6, 20, 0),
child: ListTile(
leading: CircleAvatar(
radius: 25,
backgroundColor: widget.beacon.bid Colors.green[400],
),
title: Text("Connection made"),
subtitle: Text("ID: ${widget.beacon.bid}"),
),
),
);
}
}
class Beacon {
String bid;
Beacon({this.bid});
}
final DocumentReference beaconCollection = Firestore.instance.collection("LocationData").document("BeaconData");
List<Beacon> _beaconListFromSnapshot(DocumentSnapshot snapshot) {
List<Beacon> beaconList = [];
for (int i = 0; i < snapshot.data.length; i++) {
print(i);
beaconList.add(Beacon(bid: snapshot.data[i]));
}
return beaconList;
}
Stream<List<Beacon>> get beacons {
return beaconCollection.get()
.then((snapshot) {
try {
return _beaconListFromSnapshot(snapshot);
} catch(e) {
print(e.toString());
return null;
}
}).asStream();
}
Running the above code I get the error:
I/flutter (30206): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
I/flutter (30206): The following ProviderNotFoundException was thrown building BeaconList(dirty, state:
I/flutter (30206): _BeaconListState#6361b):
I/flutter (30206): Error: Could not find the correct Provider<List<Beacon>> above this BeaconList Widget
I/flutter (30206):
I/flutter (30206): This likely happens because you used a `BuildContext` that does not include the provider
I/flutter (30206): of your choice. There are a few common scenarios:
I/flutter (30206):
I/flutter (30206): - The provider you are trying to read is in a different route.
I/flutter (30206):
I/flutter (30206): Providers are "scoped". So if you insert of provider inside a route, then
I/flutter (30206): other routes will not be able to access that provider.
I/flutter (30206):
I/flutter (30206): - You used a `BuildContext` that is an ancestor of the provider you are trying to read.
I/flutter (30206):
I/flutter (30206): Make sure that BeaconList is under your MultiProvider/Provider<List<Beacon>>.
I/flutter (30206): This usually happen when you are creating a provider and trying to read it immediately.
I/flutter (30206):
I/flutter (30206): For example, instead of:
I/flutter (30206):
I/flutter (30206): ```
I/flutter (30206): Widget build(BuildContext context) {
I/flutter (30206): return Provider<Example>(
I/flutter (30206): create: (_) => Example(),
I/flutter (30206): // Will throw a ProviderNotFoundError, because `context` is associated
I/flutter (30206): // to the widget that is the parent of `Provider<Example>`
I/flutter (30206): child: Text(context.watch<Example>()),
I/flutter (30206): ),
I/flutter (30206): }
I/flutter (30206): ```
I/flutter (30206):
I/flutter (30206): consider using `builder` like so:
I/flutter (30206):
I/flutter (30206): ```
I/flutter (30206): Widget build(BuildContext context) {
I/flutter (30206): return Provider<Example>(
I/flutter (30206): create: (_) => Example(),
I/flutter (30206): // we use `builder` to obtain a new `BuildContext` that has access to the provider
I/flutter (30206): builder: (context) {
I/flutter (30206): // No longer throws
I/flutter (30206): return Text(context.watch<Example>()),
I/flutter (30206): }
I/flutter (30206): ),
I/flutter (30206): }
I/flutter (30206): ```
I/flutter (30206):
I/flutter (30206): If none of these solutions work, consider asking for help on StackOverflow:
I/flutter (30206): https://stackoverflow.com/questions/tagged/flutter
I/flutter (30206):
I/flutter (30206): The relevant error-causing widget was:
I/flutter (30206): BeaconList file:///F:/apps/rivi_mvp/lib/screens/home/home.dart:43:19
I/flutter (30206):
I've tried a lot of different things but I don't think I understand StreamBuilders and Providers and streams enough to find a solution. Any Solutions or insights would be greatly appreciated.

Answer 1

So after messing about with this for 2 days I have found a solution that works for me.
By replacing the StreamBuilder with a StreamProvider<List<Beacon>>.value this allowed me to access the data appropriately from the BeaconList widget tree using
final beacons = Provider.of<List<Beacon>>(context) ?? [];.
In terms of the actual stream - I had data in the Firestore that in code was written as
{Beacons: [{bid: "1234",}, {bid: "2345",}, {bid: "3456",}]}.
So for the code for the stream, to format this data I used
List<Beacon> _beaconListFromSnapshot(QuerySnapshot snapshot) {
List<Beacon> x = [];
return snapshot.documents.map((doc) {
for (Map data in doc.data["Beacons"]) {
x.add(Beacon(bid: data["bid"],));
}
return x;
}).toList()[0];
}
Stream<List<Beacon>> get brews {
return beaconCollection.snapshots().map(_beaconListFromSnapshot);
}
If anyone can come up with a more efficient or more eloquent solution or pointers towards one then I would be very grateful.