StreamBuilder snapshot null for few seconds - dart

Question

I am trying to use the BLoC pattern with RxDart, and i would like to get an event from a list through StreamBuilder.
My problem is that when I am opening my Details Screen, for like 1sec I've got the following error message : The method 'firstWhere' was called on null.
Is there a way to wait getting data without adding a loading progress because I would like to keep my HeroAnimation on my image ?
class _EventsDetailsScreenState extends State<EventsDetailsScreen> {
#override
Widget build(BuildContext context) {
final eventBloc = BlocProvider.of<EventsBloc>(context);
//Event event = eventBloc.events.firstWhere((elmt) => elmt.id == widget.id, orElse:() => null);
return StreamBuilder(
stream : eventBloc.allEvents,
builder: (context, snapshot){
final Event event = snapshot.data.firstWhere((elmt) => elmt.id == widget.id, orElse:() => null);
return Scaffold(
body: Stack(
children: <Widget>[
Column(children: <Widget>[
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[
_buildEventImage(context, event),
(event.description != null && event.description.trim().isNotEmpty) ? _buildDescriptionSection(context, event) : Container(),
],
))
]),
new Positioned(
//Place it at the top, and not use the entire screen
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
actions: <Widget>[
IconButton(icon: Icon(Icons.create), onPressed: () async => print('Edit')),
],
backgroundColor: Colors.transparent, //No more green
elevation: 0.0, //Shadow gone
),
),
],
),
);
},
);
}
Widget _buildEventImage(BuildContext context, Event event) {
return Hero(
tag: 'eventImg${event.id}',
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/croatia.jpg"),
alignment: Alignment.topCenter,
fit: BoxFit.fill),
),
padding: EdgeInsets.only(left: 40.0, bottom: 250.0),
alignment: Alignment.bottomLeft,
height: MediaQuery.of(context).size.height - 30.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Material(
color: Colors.transparent,
child: Text(
event.name,
style: eventNameTextStyle,
)),
),
Container(
child: Material(
color: Colors.transparent,
child: Text(
"In ${event.date.difference(DateTime.now()).inDays} days",
style: eventDateTextStyle)))
],
)),
);
}

Answer 1

I hope you have solved this already ,
but I faced the same problem while working with BLoC Pattern in Flutter.
The problem comes from the fact that streams are asynchronous and the build method is synchronous .
This is from the official docs :
The initial snapshot data can be controlled by specifying initialData.
This should be used to ensure that the first frame has the expected
value, as the builder will always be called before the stream listener
has a chance to be processed.
StreamBuilder class
So in order to avoid this behavior you have to use initialData property in the StreamBuilder.
To use this with a BLoC you could expose a simple getter at your BLoC that get synchronous value of your current state to give as an initial data for any new subscriber.

Answer 2

You can add an if statement to check if the snapshot has data, this way firstWhere function will only be called if there's data in the snapshot :
class _EventsDetailsScreenState extends State<EventsDetailsScreen> {
#override
Widget build(BuildContext context) {
final eventBloc = BlocProvider.of<EventsBloc>(context);
//Event event = eventBloc.events.firstWhere((elmt) => elmt.id == widget.id, orElse:() => null);
return StreamBuilder(
stream : eventBloc.allEvents,
builder: (context, snapshot){
if(snapshot.hasData){
return Scaffold(
body: Stack(
children: <Widget>[
Column(children: <Widget>[
Expanded(
child: ListView(
shrinkWrap: true,
children: <Widget>[
_buildEventImage(context, event),
(event.description != null && event.description.trim().isNotEmpty) ? _buildDescriptionSection(context, event) : Container(),
],
))
]),
new Positioned(
//Place it at the top, and not use the entire screen
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
actions: <Widget>[
IconButton(icon: Icon(Icons.create), onPressed: () async => print('Edit')),
],
backgroundColor: Colors.transparent, //No more green
elevation: 0.0, //Shadow gone
),
),
],
),
);
}else{
return Scaffold();
}
});
}