Flutter: How to use StreamBuilder with ListView.separated

Question

I want a ListView with items from a Stream. Of course, content of the List should reflect changes in the Stream. And due to my designer quirks, I want items in the List be separated by a divider.

Just wondering, what is the proper way to create a ListView with separators, and reacting on Stream changes.

body: StreamBuilder(
        stream: someStream,
        builder: (ctx, snapshot) {
          return ListView.separated(
            separatorBuilder: (context, index) => Divider(color: Colors.black),
            itemCount: ***whatsHere***?,
            itemBuilder: (BuildContext ctx, int index) {
...

Hope I've missed something. Since an idea to get somehow the length of the source stream looks at least strange, because of the asynchronous nature of the streams. It seems might be feasible by StatefullWidget with stream subsriptions (and setState invoking), but StreamBuilder is invented to do exactly the same, isn't it?

Answer 1

Your snapshot should be a list of elements so you can access the length of the list like this:

body: StreamBuilder(
        stream: someStream,
        initialData: [],
        builder: (ctx, snapshot) {
          return ListView.separated(
            separatorBuilder: (context, index) => Divider(color: Colors.black),
            itemCount: snapshot.data.length,
            itemBuilder: (BuildContext ctx, int index) {
                final element = snapshot.data[index];

I would suggest to add also the initialData to the StreamBuilder so you don't work with a null value in your snapshot.

Hope it helps