How to use a ListView with an Iterator

Question

I would like to build a ListView of "Message Cards" for a timeline. The message data comes from a Container class that has several filtering functions. I only show one in the example.

EDIT: CLARIFICATOIN I currently have this ListView working using a ListView.builder(), which depends on being able to access elements from the source data by index.

I would like to change it so that the elements come from an iterable which is generated on demand as the user scrolls the listview.

In the current working solution the Provider has a findByChildId which returns a List. This list is generally very long and the user likely only wants to look at the last 100 or so messages.

So to not scan through many thousands of messages to return a few thousand of which only some are of interest I imagine using a findByChildId which yields items as the user scrolls.

class MessageData with ChangeNotifier {
  List _messages;

  // New Iterable to lazily search only for items the user wants to look at
  Iterable filterByChildId({String childId}) sync* {
    if (childId == null) {
      throw 'insanity check - Cannot search for null Child ID';
    }
    String previous;
    if (_messages != null) {
      for (MessageRec r in _messages) {
        if (r.properties['thread'] == childId) {
          if (previous == null || ymdFromDt(r.timeSent) != previous) {
            yield DateMark.fromDateString(previous); // Special Message inserted 
            previous = ymdFromDt(r.timeSent);
          }
          yield r;
        }
      }
    }
  }

  // And many other supporting methods here.
}

Note: I assume the above works - this is my first forray into Iterables in Dart / flutter.

The above used to be a method that returned a list of MessageRec by iterating over the entire list and returning all matching items.

The ListView.builder could get items from the resulting list because the elements of a List can be accessed by index.

```dart
   ... Timeline Widget ...
 
   @override
   Widget build(BuildContext context) {
      return Consumer(
         builder: (context, messageData, _) {
            return ListView.builder((context, itemIndex) {
    
               // How to access elements from messageData.filterByChildId(childId) here
               MessageRec nextMessage = messageData.filterByChildId(childId)[itemIndex];
               // The above does not work because there is no indexing on Iterables
               
               return MessageCard.fromMessageRec(nextmessage);
               }
            );
         }
      );
    }
... snip rest of Widget methods

Or perhaps the answer lies in using a vanilla ListView with the children coming form the iterator, but I assume that would then still just end up creating all the messages in the list.

user_2076731 · Answer

Despite the name, ListView does not mandate the use of a List. You need to use a List only with the default constructor, but if you use ListView.builder you can use an Iterable to generate the values. Here is an example:

@override
Widget build(BuildContext context) =>
  ListView.builder(
    itemBuilder: (BuildContext _, int i) => 
      MessageCard.fromMessageRec(messageData.filterByChildId(childId).elementAt(i)
  );

As for the number of items allowed, the documentation of ListView.builder states that:

This constructor is appropriate for list views with a large (or infinite) number of children because the builder is called only for those children that are actually visible. Blockquote

How to use a ListView with an Iterator

1 Answers