Nested models cannot update UI

[freatraum]

Description
I have created four models: appModel, TrackModel, ClipModel, and NoteModel, which are nested (Details are in my repositories: editor_demo.). When I use methods in ClipModel to update data within ClipModel, the UI is not updated.

At line 54 in lib/views/track_view.dart of the repository editor_demo, the UI can be updated normally.

  onPanDown: (details) {
    SingingClip singingClip = SingingClip();
    appModel
      ..setSelectedTrackId(widget.track.id)
      ..setSelectedClipId(singingClip.id);
    singingClip.setStart(details.localPosition.dx);
    singingClip.setClipStart(details.localPosition.dx);
    singingClip.setName("New Clip");
    singingClip.setLength(120);
    widget.track.insertClip(singingClip);
  },

However, at line 46 in lib/views/track_view.dart of the repository editor_demo, the UI does not update normally. I have to use setState to force an update.

  onPanUpdate: (details) {
    var clip = widget.track.findClipById(appModel.selectedClipId);
    var deltaX = details.localPosition.dx - clip.start;
    if (deltaX > 120) {
      clip.setLength(deltaX);
      setState(() {});
    }
  },

Is this due to the complexity of my model? How can I solve this problem?

[rrousselGit]

For help request, you should instead ask on StackOverflow/Discord.

TL;DR, you need to use a ChangeNotifierProvider, and call notifyListeners() when you update the object.