Flutter: How to use StreamBuilder with ListView.separated
Solution 1
snapshot
can have different states.
Generally you can do something like this:
if (snapshot.hasError){
//return error message
}
if (!snapshot.hasData){
//return a loader
}
//else you have data
List<your items> = snapshot.data;
// do your thing with ListView.builder
For more control you can check the snapshot.connectionsState
which can be none
,done
,active
,waiting
.
You can find more here for the AsyncSnapshot class and here for a quick tutorial
Solution 2
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
Solution 3
try this hope it works for you
body: StreamBuilder(
stream: someStream,
builder: (ctx, snapshot) {
return ListView.separated(
separatorBuilder: (context, index) => Divider(color: Colors.black),
itemCount: snapshot.data.lenght,
itemBuilder: (BuildContext ctx, int index) {
final titre= snapshot.data[index].title ; // for example
return ListTile ( title : Text(titre)) ;
//....
Related videos on Youtube
papirosnik
Updated on June 04, 2022Comments
-
papirosnik over 1 year
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?
-
papirosnik almost 4 yearsok, now I see, the main problem was I was intended to use Stream<Data> instead of Stream<List<Data>>. So, since shanpshot couldn't provide me proper information, I sucessfullly ignored it.
-
ShadeToD about 3 years(!snapshot.hasError) - this will return when there is no error.
-
magicleon94 about 3 yearsuopo, you're right, there's a "!" that shouldn't be there. Fixed, thank you!
-
kamalbanga over 2 yearsYes, the insight here is to use
Stream<List<Data>>
instead ofStream<Data>
and not just checking!snapshot.hasData
. -
Chetan Goyal over 2 yearsThanks for your answer. I wanted to know about how can I handle with null value issue if I want to show a simple loading widget while data is being loaded. In that case, initialData will not work.
-
morgwai over 2 years@papirosnik hey, I'm new to flutter, so please bare with my newbie question ;-) how to convert
Stream<Data>
toStream<List<Data>>
? my stream comes from websocket (WebSocketChannel.connect(uri).stream
) and I want to have aListView
with a log of received messages. Thanks!