How to have a scrollable list inside a SliverToBoxAdapter

Question

I am using the below SliverToBoxAdapter inside the CustomSrollView:

        SliverToBoxAdapter(
            child: Stack(
            children: <Widget>[
              Container(
                width: double.infinity,
                height: 50,
                decoration: BoxDecoration(color: pink),
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 30),
                child: ListView.builder(
                  padding: const EdgeInsets.all(0),
                  shrinkWrap: true,
                  itemBuilder: (context, index) {
                    return buildSongRow(songs[index]);
                  },
                  itemCount: songs.length,
                ),
              )
            ],
          ))

The issues is that the list doesn't scroll, which is obvious as it has box constraints. I am using SliverToBoxAdapter here as I have to stack my list over some Container at the top of the list. How can I make my list scroll? If it cannot be done using SliverToBoxAdapter, do I have any other options?

Answer 1

You can make Listview scrollable by adding the same scrollController of the parent CustomScrollView.

class ScrollExample extends StatelessWidget {
  final scrollController = ScrollController();
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      //  add scrollController to sliver root
      controller: scrollController,
      slivers: <Widget>[
        SliverToBoxAdapter(
          child: Card(
            child: ListView.builder(
              //  add the same scrollController here
            controller: scrollController,
              shrinkWrap: true,
              itemCount: 19,
              itemBuilder: (BuildContext context, int index) {
                return Text("ibnShamas");
              },
            ),
          ),
        ),
      ],
    );
  }
}