Flutter/Dart/Firebase - wait until data has loaded before displaying - firebase

Question

I am trying to create a list of unique "events" in my app. I have created a couple of functions to extract the data from firebase:
// event list from snapshot
List<String> _eventsFromSnapshot(QuerySnapshot snapshot) {
return snapshot.docs.map(
(doc) {
return doc['event'].toString() ?? '';
},
).toList();
}
//get events data
Stream<List<String>> get events {
return productCollection.snapshots().map(_eventsFromSnapshot);
}
I then want to build my list view in another screen. I have implemented my StreamProvider in the root page of my homescreen:
class OurHomePage extends StatefulWidget {
#override
_OurHomePageState createState() => _OurHomePageState();
}
class _OurHomePageState extends State<OurHomePage> {
#override
Widget build(BuildContext context) {
return StreamProvider<List<Product>>.value(
value: OurDatabase().products.handleError((e) {
print(e.toString());
}),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Align(
alignment: Alignment.center,
child: Column(
children: [
OurHeadline(),
AllCards(),
HowItWorks(),
],
),
),
),
),
);
}
}
And then I create a function to return the list of Strings and use that in my stateless widget:
class AllCards extends StatelessWidget {
#override
Widget build(BuildContext context) {
final List<String> uniqueEventList = getListOfEvents(context);
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [Text('Browse all Cards'), Text('Shop All')],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
),
SizedBox(
height: 125,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: uniqueEventList.length,
itemBuilder: (context, i) {
return Container(
decoration: BoxDecoration(
border: Border.all(),
),
width: 160.0,
child: Center(
child: Text(uniqueEventList[i]),
),
);
},
),
)
],
),
),
);
}
List<String> getListOfEvents(BuildContext context) {
final uniqueEvents = Provider.of<List<Product>>(context);
final List<String> list = [];
for (var item in uniqueEvents) {
list.add(item.event);
}
return list.toSet().toList();
}
}
The problem is that whenever I switch pages, for a split second I get this message and an error appears:
The getter 'iterator' was called on null.
Receiver: null
Tried calling: iterator
Which indicates to me that I need to use some sort of async functionality to wait for the events data to finish loading, but is there a simple way to do this without going for something like a Future builder?
Any help would be appreciated!