简体   繁体   中英

How to use StreamBuilder inside CustomScrollWidget?

I'm trying to show some data from sqlite and everything is ok but I can't use StreamBuilder inside CustomScrollView it says:

A RenderViewport expected a child of type RenderSliver but received a child of type RenderPositionedBox.

Then I wrapped StreamBuilder with SliverPadding (normally SliverPadding was wrapped by StreamBuilder) but this time it says:

A RenderSliverPadding expected a child of type RenderSliver but received a child of type RenderPositionedBox.

I tried to use SliverToBoxAdapter and wrapped StreamBuilder with this but didn't solve my problem so How can I achieve this?

Here is last status of my code:

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      centerTitle: true,
      floating: false,
      snap: false,
      pinned: false,
      expandedHeight: 0,
      elevation: 3,
      forceElevated: true,
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      brightness: Brightness.light,
      title: Text(
        'Your Lists',
        style: GoogleFonts.openSans(
            fontSize: 22, fontWeight: FontWeight.bold, color: Colors.black),
      ),
    ),
    SliverPadding(
      padding: EdgeInsets.fromLTRB(16, 16, 16, 74),
      sliver: StreamBuilder<List<Category>>(
          stream: bloc.getAll().asStream(),
          builder: (context, AsyncSnapshot<List<Category>> snapshot) {
            if (snapshot.hasData) {
              return SliverGrid(
                delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  if (index == snapshot.data.length) {
                    return ListAddCard();
                  }
                  return ListCard(
                    category: snapshot.data[index],
                  );
                }, childCount: snapshot.data.length + 1),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisSpacing: 16,
                    crossAxisSpacing: 16,
                    childAspectRatio: 1.1),
              );
            }
            return Center(child: CircularProgressIndicator());
          }),
    )
  ],
);

The problem here is that SliverPadding expects a RenderSliverPadding but you are giving it a RenderPositionedBox . What you could do instead is to remove SliverPadding and wrap it in SliverGrid instead of in StreamBuilder .
Try this:

StreamBuilder<List<Category>>(
          stream: bloc.getAll().asStream(),
          builder: (context, AsyncSnapshot<List<Category>> snapshot) {
            if (snapshot.hasData) {
              return  SliverPadding(
      padding: EdgeInsets.fromLTRB(16, 16, 16, 74),
      sliver: SliverGrid(
                delegate: SliverChildBuilderDelegate(
                    (BuildContext context, int index) {
                  if (index == snapshot.data.length) {
                    return ListAddCard();
                  }
                  return ListCard(
                    category: snapshot.data[index],
                  );
                }, childCount: snapshot.data.length + 1),
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 2,
                    mainAxisSpacing: 16,
                    crossAxisSpacing: 16,
                    childAspectRatio: 1.1),),
              );
            }
            return Center(child: CircularProgressIndicator());
          }),

The solution to this is that you should wrap your entire CustomScrollView inside the Streambuilder rather than the other way round. I was facing the same issue till I used this strategy.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM