Flutter: How to use StreamBuilder with ListView.separated

17,616

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)) ;  
     //....
Share:
17,616

Related videos on Youtube

papirosnik
Author by

papirosnik

Updated on June 04, 2022

Comments

  • papirosnik
    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
    papirosnik almost 4 years
    ok, 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
    ShadeToD about 3 years
    (!snapshot.hasError) - this will return when there is no error.
  • magicleon94
    magicleon94 about 3 years
    uopo, you're right, there's a "!" that shouldn't be there. Fixed, thank you!
  • kamalbanga
    kamalbanga over 2 years
    Yes, the insight here is to use Stream<List<Data>> instead of Stream<Data> and not just checking !snapshot.hasData.
  • Chetan Goyal
    Chetan Goyal over 2 years
    Thanks 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
    morgwai over 2 years
    @papirosnik hey, I'm new to flutter, so please bare with my newbie question ;-) how to convert Stream<Data> to Stream<List<Data>>? my stream comes from websocket (WebSocketChannel.connect(uri).stream) and I want to have a ListView with a log of received messages. Thanks!