How to use Listview inside SingleChildScrollView?

Question

I am facting an issue related to scroll listview inside SingleChildScrollView which listview scroll controller is not working.

Getx Controller

var scrollController = ScrollController();
@override
  void onInit() {
  scrollController.addListener((){
     if(scrollController.position.maxScrollExtent==scrollController.offset){
       //fetch more data
     }
  });
}

Some code in Screen

Widget build(BuildContext context) {
    return Obx(
        () => SingleChildScrollView(
            child: Column(
              children: [
                MyFormFilterWidget(),
                Text("Found:${controller.aspList.length}"),
                controller.aspIsLoading.value
                    ? ProductLoading()
                    : controller.aspList.isNotEmpty
                  shrinkWrap: true,
                  padding: themePadding,
                  controller: controller.scrollController,
                  itemCount: controller.aspList.length + 1,
                  itemBuilder: (_, index) {
                    if (index < controller.aspList.length) {
                      return ProductCard(
                          product: controller.aspList[index]);
                    } else {
                      return controller.aspIsMoreLoading.value
                          ? SizedBox(
                        width: 200,
                        child: Center(
                          child: Padding(
                            padding: EdgeInsets.all(10),
                            child: CircularProgressIndicator(
                                color: primaryColor),
                          ),
                        ),
                      )
                          : controller.aspLastPage.value
                          ? SizedBox(
                        width: 200,
                        child: Padding(
                          padding: EdgeInsets.all(10),
                          child: Text("No more data",
                              textAlign: TextAlign.center),
                        ),
                      )
                          : SizedBox.shrink();
                    }
                  },
                  separatorBuilder: (BuildContext context, int index) {
                    return const SizedBox(height: 10);
                  },
                )
                    : const EmptyProduct(),
              ],
    );
  }

In this case, scrollController not working If I remove SigleScrollView and only return ListView, it works as normal.

Answer 1

If you use SingleChildScrollView and inside you have ListView widget. it will not scrollable until you set the ListView physics to NeverScrollableScrollPhysics and shrinkWrap to true .

physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,

Answer 2

You can just have column instead of ListView here.

body: SingleChildScrollView(
    child: Column(
      children: [
        Text("A"),
        for (int i = 0; i < 10; i++)
          Column(
            children: [
              Text("item $i"),
              Text("Divider of $i"),
            ],
          )
      ],
    ),
  ),

With shrinkWrap: true

SingleChildScrollView(
  child: Column(
    children: [
      Text("A"),
      ListView.builder(
        shrinkWrap: true,
        itemCount: 222,
        itemBuilder: (context, index) => Text(" $index"),
      )
    ],
  ),
),

Better and recomanded CustomScrollView

return Scaffold(
  body: CustomScrollView(
    slivers: [
      SliverToBoxAdapter(
        child: Text("a"),
      ),
      SliverList(
        delegate: SliverChildBuilderDelegate((context, index) {
          return Text("item $index");
        }, childCount: 133),
      )
    ],
  ),
);