Flutter Listview builder is blank until hot reload-CodePudding

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.

CodePudding user response：

You entries should be an ObservableList - then only the Observer widget will rebuild the changes in entries list automatically.

...
@observable
ObservableList<IndvidualReadings> entries = ObservableList;

...