Is it possible to use ListView.builder inside of CustomScrollView?

Question

Is it possible to use ListView.builder (or something similar) inside of a CustomScrollView? I have a CustomScrollView like this:

return Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverAppBar(...),
      SliverList(delegate: SliverChildListDelegate(children))
    ],
  ),
);

This works great, but in my actual scenario the list could have thousands of items, so I do not want to pass them all in to SliverChildListDelegate. I want to use ListView.builder (or something similar) to build the items as they are scrolled into view. I was expecting there to be a .builder constructor on either SliverList or SliverChildListDelegate but I don't see anything like that. Am I missing something?

Heteropolar

Answer 1

The delegate argument of SliverList is not necessarily a SliverChildListDelegate.

You can also use SliverChildBuilderDelegate to achieve the builder effect of ListView.builder

SliverList(delegate: SliverChildBuilderDelegate((context, index) {
  return Container();
}));

Cassimere

I am using SilverBuilderDelegate but still scrolling not working. I have raised a questions. #62437549 – Fiddler

The child count needs to be added... so delegate: SliverChildBuilderDelegate( (BuildContext context, int index) { return ...; }, childCount: ...length, ), – Cognate

Answer 2

I'm not sure how it is done in CustomScrollView but you can try this:

Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(...),
          ];
        },
        body: ListView.builder(..),)
);

Gruchot

You made my day. I struggled to convert ListView into Slivers to hide the page title when scrolling until I found your solution using NestedScrollView with headerSliverBuilder. Thank you very much. – Lintel

Answer 3

You can use List.generate as example below

return Scaffold(
 body: CustomScrollView(
    slivers: [
      SliverAppBar(...),
      SliverList(delegate: SliverChildListDelegate(
          List.generate(yourList.length, (idx) {
                return Padding(
                  padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                  child: Card(
                    child: ListTile(
                      leading: Icon(null),
                      title: Text(yourList[idx]),
                      onTap: null,
                    ),
                  ),
                );
              })
      ))
    ],
  ),
);

Welldressed

In addition to the code you've provided, consider giving a summary as to why this solves the issue. – Legman

Answer 4

This worked for me and I can have a SliverAppBar

return CustomScrollView(
      slivers: [
        SliverAppBar(
        ),
        SliverList(
            delegate: SliverChildListDelegate([
          SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  child: ListView.builder(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemBuilder: (BuildContext context, int index) {

                    }
                  ),
                ),
              ],
            ),
          )
        ]))
      ],
    );

Chericheria

using shrink wrap will have serious performance issues for huge lists. youtube.com/watch?v=LUqDNnv_dh0 – Hoebart

For everyone else coming here: You can safely use shrinkWrap: true if you have ~2-4 widgets to render, but i totally agree with Nithin Sai that it will drastically cause performance issues and possible memory issues (if you render e.g. many images). – Buckeye

Answer 5

You can use SliverList.builder directly instead of ListView.builder. For instance:

return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(...),
          SliverList.builder(
            itemCount: itemCount,
            itemBuilder: (context, index) {
              return YourItemWidget();
            },
          ),
        ],
      ),
    );

Guibert