No Refresh indicator with CarouselSlider

Question

I have the below code I want to add pull-to-refresh functionality it works when I drag from top but wouldn't work when I try to drag from center that's because I am using CarouselSlider it works when I remove it but I want to use it along with the refresh indicator on pulling from anywhere on the screen.

RefreshIndicator(
      onRefresh: refreshScreen,
      child: SingleChildScrollView(
        physics: const AlwaysScrollableScrollPhysics(),
        child: Container(
          color: kBackgroundColor,
          child: Stack(
            children: <Widget>[
              CarouselSlider(
                carouselController: tabCarouselController,
                options:

I tried many other solutions like wrapping it inside a list or SingleChildScrollView but none of them worked.

Answer 1

Wrap all the page body widgets in a listview like the example below

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Carousel Slider with RefreshIndicator'),
      ),
      body: RefreshIndicator(
        onRefresh: () async {},
        child: ListView(
          children: [
            CarouselSlider(
              options: CarouselOptions(
                height: 200.0,
                enlargeCenterPage: true,
                autoPlay: true,
                aspectRatio: 16 / 9,
                autoPlayCurve: Curves.fastOutSlowIn,
                enableInfiniteScroll: true,
                autoPlayAnimationDuration: const Duration(milliseconds: 800),
                viewportFraction: 0.8,
              ),
              items: [
                Container(
                  color: Colors.green,
                  child: const Center(
                    child: Text('Slide 1'),
                  ),
                ),
                Container(
                  color: Colors.blue,
                  child: const Center(
                    child: Text('Slide 2'),
                  ),
                ),
                Container(
                  color: Colors.red,
                  child: const Center(
                    child: Text('Slide 3'),
                  ),
                ),
              ],
            ),
            // Other widgets can go here
          ],
        ),
      ),
    );
  }
}

In this example, the CarouselSlider is placed inside a ListView, and the RefreshIndicator wraps the entire ListView. This should allow you to have both the carousel slider and the pull-to-refresh functionality and you can pulling from anywhere on the screen.