.select not updating with a list item that goes from null to having data

[mark8044]

I have a list of lists of maps inside a ChangeNotifier.

The idea is that I have API containing a list of news articles. The list is paginated by the API so an API call request is made specifiying which page of data should be sent.

I previously had a large map of the data, where the map would keep growing as more pages of data came in. This is problematic because my list views would rebuild in entirety as the map kept getting changed.

So I've decided to divide each page of API data into its own small listview/column and just add those columns into a larger customscrollview as they come in

To do this, Ive created a larger container pageMaps list which holds each page of data. pageMaps[1] is page 1 of data, etc.. Each pageMap List item contains about 20 articles within it

class MyData extends ChangeNotifier
{

List<List<dynamic>> _pageMaps = [[]];
List<List<dynamic>> get pageMaps => _pageMaps;

// some logic that adds items to _pagemaps via API network call
_pageMaps.add(apiresponse.data["mynewdata"]);
}

Now in my Widget, I try accessing this data with a select:

     if (ref.watch(MyProvider(familyitemID).select((obj) => obj.pageMaps)).elementAtOrNull(widget.page) != null)
      {
        debugPrint('i select');
        thisPageMap = ref.watch(MyProvider(familyitemID).select((obj) => obj.pageMaps[widget.page]));
      }
     else
     {
     debugPrint('im null');
      thisPageMap = [];
     }

When the page first builds it properly shows null as the data has not come in from my API network call, once it populates, the Widget never rebuilds, ie. I select is never printed.

Of course If I change the logic to be a straight .watch on pageMaps, without the select then it will update my widget properly as the API updates. However I find myself back where I started as whenever pageMaps[2] is updated, the widget rebuilds for lets say pageMaps[1] which is what im trying to avoid.

Im trying to specifically look for a change in pageMaps[x] and update only then. I guess pageMaps[x] would be considered mutable and that might be the issue here? But surely there should be a way to select for an item in a list when there is a state change and not disrupt all the other pages of data relying on it?

[rrousselGit]

Your select isn't quite right. You're selecting the whole map, even though you're mutating it.
You probably want something like:

final page = ref.watch(provider.select((obj) => obj.pageMaps[widget.page]));
if (page != null) {

} else {

}

[mark8044]

@rrousselGit yes I prefer to select the Listitem directly to avoid rebuild, but it seems impossible with an empty list (while waiting for API data to fill in). However, the .elementAtOrNull helps me avoid a RangeError that I get with a list when empty while waiting for the API result

RangeError (length): Invalid value: Only valid value is 0: 1

[rrousselGit]

Right. I thought you used a map. But that doesn't change the answer.

Don't:

watch(provider.select((obj) => obj.field).method());

Do:

watch(provider.select((obj) => obj.field.method()));