Flutter - How to use Carousel Slider and SingleChildScrollView?

Question

I have a Carousel Slider in my page which able to scroll horizontally. I also uses SingleChildScrollView to slide the whole page vertically. But the problem is, when I try to scroll the page (vertical), when my finger gets to scroll on the slider area, the page won't scroll. How to make it able to scroll horizontally for the slider, and vertically for the page?

The current structure of my code is:

SingleChildScrollView(
     scrollDirection: Axis.vetical,
   child: Column(
      children [
         CarouselSlider(...)
      ],
   ),
);

score 2 · Answer 1 · answered Mar 10 '22 at 12:11

Try below code. And here is my full code: api_calling_demo

SingleChildScrollView(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          CarouselSlider.builder(
            options: CarouselOptions(
              height: 400,
              viewportFraction: 0.75,
              enableInfiniteScroll: true,
              autoPlay: true,
              autoPlayInterval: Duration(seconds: 4),
              autoPlayAnimationDuration: Duration(milliseconds: 1500),
              autoPlayCurve: Curves.fastOutSlowIn,
              enlargeCenterPage: true,
            ),
            itemCount: _upcomingMoviesList.length,
            itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) {
              final data = _upcomingMoviesList[itemIndex];
              return ItemHomeMovie(data);
            },
          ),
        ],
      ),
    )

Flutter - How to use Carousel Slider and SingleChildScrollView?

1 Answers1