Flutter Listview builder is blank until hot reload - flutter

Question

I am using mobx and have split the code into 2 indvidualdata and indvidualdata provider and there is a autogenerated code with mobx.
The Listview.builder does not load the data until I hot reload the code (VSCode).
class IndividualDataState extends State<IndividualData> {
#override
void initState() {
super.initState();
setup();
sl<IIndividualDataProvider>()?.initReporting(context);
}
#override
Widget build(BuildContext context) {
return Observer(
builder: (_) => Scaffold(
backgroundColor: Colors.grey[100],
appBar: AppBar(
elevation: 0,
centerTitle: true,
title: Text("All Data"),
backgroundColor: PRIMARY,
),
body: Stack(
children: <Widget>[
ListView.builder(
itemCount: sl<IIndividualDataProvider>().entries.length == null
? 0
: sl<IIndividualDataProvider>().entries.length,
itemBuilder: (BuildContext context, int index) {
return new ListTile(
title: new Text(sl<IIndividualDataProvider>()
.entries[index]
.entry
.toString()),
subtitle: new Text(sl<IIndividualDataProvider>()
.entries[index]
.createdAt
.toString()),
);
},
),
],
),
),
);
}
}
The provider
class IndividualDataProvider = IIndividualDataProvider
with _$IndividualDataProvider;
abstract class IIndividualDataProvider with Store {
#observable
bool isLoading = false;
#observable
List tags = [];
#observable
List<IndvidualReadings> entries = [];
#action
Future initReporting(context) async {
try {
isLoading = true;
Response _readings = await sl<IIndividualDataService>().getAllRmssd();
Map<String, dynamic> map = _readings.data;
List<dynamic> data = map["readings"];
if (data != null) {
data.forEach((v) {
IndvidualReadings tempRead = IndvidualReadings.fromJson(v);
entries.add(tempRead);
});
}
isLoading = false;
} catch (err) {
isLoading = false;
print(err.toString());
}
}
}
class IndvidualReadings {
double entry;
String createdAt;
List<ReadingTags> tags = [];
IndvidualReadings({this.entry, this.createdAt, this.tags});
factory IndvidualReadings.fromJson(Map<String, dynamic> json) {
var list = json['tags'] as List;
print(list.runtimeType);
List<ReadingTags> tagsList =
list.map((i) => ReadingTags.fromJson(i)).toList();
return IndvidualReadings(
entry: json['entry'], createdAt: json['created_at'], tags: tagsList);
}
}
class ReadingTags {
int id;
String tagName;
ReadingTags({this.id, this.tagName});
ReadingTags.fromJson(Map<String, dynamic> json) {
id = json['id'];
tagName = json['tag_name'];
}
}
When I click to open the page, it is blank. I had a few prints to see if the data is being pulled by the API and it was printing successfully.
Then when I just hot reload (I usually press Ctrl+S) the information is loaded correctly and the ListTile is rendered.
I am completely lost for words why this happens. Any help is appreciated.

Answer 1

You entries should be an ObservableList - then only the Observer widget will rebuild the changes in entries list automatically.
...
#observable
ObservableList<IndvidualReadings> entries = ObservableList;
...