Carousel Slider is repeated almost infinite number of times vertically, instead of once, with no error showing

Issue

I’m doing a carousel slider, but it’s repeating itself almost an infinite number of times, instead of showing there once in my home page, and there is no error message that I can work with, I can’t seem to find why it’s doing all that, any help?

Carousel Slider code:

    class CarouselSliderPage extends StatefulWidget {
  const CarouselSliderPage({Key? key}) : super(key: key);

  @override
  _CarouselSliderPageState createState() => _CarouselSliderPageState();
}

class _CarouselSliderPageState extends State<CarouselSliderPage> {
  int activeIndex = 0;

  setActiveDot(index) {
    setState(() {
      activeIndex = index;
    });
  }

  List imageList = [
    "assets/images/mobiles/4.png",
    "assets/images/laptops/1.jpg",
    "assets/images/mobiles/3.png",
    "assets/images/laptops/7.jpg",
    "assets/images/mobiles/6.png",
  ];

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        SizedBox(
          height: 10,
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          child: CarouselSlider(
            options: CarouselOptions(
              autoPlayInterval: Duration(seconds: 4),
              autoPlayCurve: Curves.fastLinearToSlowEaseIn,
              autoPlayAnimationDuration: Duration(seconds: 2),
              viewportFraction: 1.0,
              onPageChanged: (index, reason) {
                setActiveDot(index);
              },
            ),
            items: imageList
                .map(
                  (item) => Center(
                    child: Image.asset(
                      item,
                      fit: BoxFit.cover,
                    ),
                  ),
                )
                .toList(),
          ),
        ),
        Positioned(
          left: 0,
          right: 0,
          bottom: 10,
          child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: List.generate(imageList.length, (idx) {
                return activeIndex == idx ? ActiveDot() : InactiveDot();
              })),
        )
      ],
    );
  }
}

class ActiveDot extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 8.0),
      child: Container(
        width: 25,
        height: 8,
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    );
  }
}

class InactiveDot extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 8.0),
      child: Container(
        width: 8,
        height: 8,
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    );
  }
}

The calling of Carousel Slider class:

Container(
          height: MediaQuery.of(context).size.height,
          child: ListView.builder(
            itemBuilder: (context, index) =>
                CarouselSliderPage(),
          ),
        ),

Solution

ListView.builder is a builder that can and will multiple of ‘x’ widgets it works like a loop unless told otherwise.

You can try adding a parameter into listview.builder that’s called itemCount: 1 or in your specific case add ‘imageList.length’ and it will cap on the amount of images you have on your list.

or simply remove the listview.builder entirely and just call

CarouselSliderPage(),

Example of code below:

Container(
          height: MediaQuery.of(context).size.height,
          child: ListView.builder(
            itemCount: imageList.length,
            itemBuilder: (context, index) =>
                CarouselSliderPage(),
          ),
        ),

But I would use this one below:

Container(
          height: MediaQuery.of(context).size.height,
          child: CarouselSliderPage(),
        ),

Answered By – petras J

Answer Checked By – Gilberto Lyons (FlutterFixes Admin)