Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using a StreamBuilder and a SliverLists In CustomScrollView

Tags:

flutter

dart

I am trying to use a StreamBuilder to fetch data and I want to display that data using a SliverList all inside a CustomScrollView so I can take advantage of the features that come with the CustomScrollView.

Any ideas on how I can achieve this?

like image 765
Uma Avatar asked Jan 18 '19 01:01

Uma


People also ask

When should I use StreamBuilder?

If you need to build a widget dependent on the result of a Stream, you can utilize the StreamBuilder widget. You can make a Stream and pass it as the stream contention. Then, at that point, you need to pass an AsyncWidgetBuilder work that is utilized to construct a widget dependent on the snapshots of the Stream.

What is a StreamBuilder?

StreamBuilder is a widget that builds itself based on the latest snapshot of interaction with a stream.

What is StreamBuilder stream controller?

A stream can have multiple listeners and all those listeners can get the pipeline. puting in all will get equal value. The way you put values on the stream is by using the Stream Controller. A stream builder is a widget that can convert user-defined objects into a stream.

What is stream and StreamBuilder in flutter?

StreamBuilder<T> class Null safety. Widget that builds itself based on the latest snapshot of interaction with a Stream. Widget rebuilding is scheduled by each interaction, using State. setState, but is otherwise decoupled from the timing of the stream.

What is the use of slivers in customscrollview?

With CustomScrollView, you can create various scrolling effects like grids, lists, and expanding headers. One of its properties is slivers, in which you can pass a collection of widgets.

What is the difference between a listview and a customscrollview?

Eg: A ListView and its Sliver equivalent is demonstrated in the code below. The CustomScrollView is a ScrollView type widget that lets you create different scrolling effects using Slivers such as expanding headers, lists, grids etc. Sliver components are widgets that go inside slivers that necessarily produce RenderSliver objects.

What is customscrollview in flutter?

Flutter's CustomScrollView is basically a ScrollView with some effects. With CustomScrollView, you can create various scrolling effects like grids, lists, and expanding headers. One of its properties is slivers, in which you can pass a collection of widgets.

What widgets are compatible with customscrollview?

Each widget in slivers must have RenderSliver objects. Example of compatible widgets include SliverAppBar, SliverToBoxAdapter, SliverList, and SliverGrid. Below is a basic example how to create a CustomScrollView widget. The SliverAppBar is a material design app bar that's compatible with CustomScrollView.


2 Answers

Sure, it's easy, here you have a code sample:

    class SampleStreamBuilder extends StatelessWidget {
      Stream<List<String>> loadData() async* {
        await Future.delayed(Duration(seconds: 3));
        yield List.generate(10, (index) => "Index $index");
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: StreamBuilder<List<String>>(
            stream: loadData(),
            builder: (context, snapshot) {
              return snapshot.hasData
                  ? CustomScrollView(
                      slivers: [
                        SliverList(
                          delegate: SliverChildBuilderDelegate((context, index) {
                            return ListTile(
                              title: Text(snapshot.data[index]),
                            );
                          }, childCount: snapshot.data.length),
                        )
                      ],
                    )
                  : Center(
                      child: CircularProgressIndicator(),
                    );
            },
          ),
        );
      }
    }
like image 116
diegoveloper Avatar answered Sep 20 '22 18:09

diegoveloper


In this case it is fine to rerender the whole CustomScrollView. However if you want to rerender just one Sliver in a CustomScrollView, do it like this:

CustomScrollView(
    slivers: <Widget>[
      StreamBuilder(
        stream: stream,
        builder: (ctx, snapshot) {
           return SliverToBoxAdapter(
             child: Text('sliver box'),
           );
        },
      )
    ],
  ),

Remember to always return a Sliver inside the StreamBuilder.

like image 41
Sondre Sørbye Avatar answered Sep 20 '22 18:09

Sondre Sørbye