Multiple Image Slider with indicator in Flutter

I have been working on a project where I need to show an image slider on every list item. So with the help of “carousel_slider” I implemented the image slider.

The problem comes with the indicator. “carousel_slider” don't have any support for the indicator. We have to create our own indicator with the help of ListView, This example is also shown in “carousel_slider”.

Everything looks fine until you have a long list of images. Where indicators go beyond user visibility. When the user changes the slider image position, Indicator also indicates but the indicator is not visible to the user because we have to scroll the indicator ListView. If we show only one Slider then we can use a ScrollController. But we have Slider in every list item and the list item is dynamic.

What I have done, I have created a “ScrollController” object in every list item object and map the scrollController object to the indicator ListView. Also stored current scrolled image item position to list item so that we can indicate in Indicator.

Lots of talk, Time for code now

 Stack( // Showing indicator on top of the slider image
      alignment: Alignment.bottomCenter,
      children: [
        CarouselSlider(
          items: ImageSlider.getImageSlider(item), //Helper method which returns list of Images
          options: CarouselOptions(
              viewportFraction: 1,
              enlargeCenterPage: false,
              onPageChanged: (i, reason) {
                item.sliderCurrentPosition = i; //Storing Slider position on the list item
                controller.dataList[index] = item; //For Flutter to rebuild the ui
              },
              enableInfiniteScroll: true),
        ),
        ImageSlider.indicator(item), //Creating indicators
      ],
    );

Now helper static methods

static getImageSlider(ListingModel item) {
  List<Widget> imageSliders = item.images
      .map(
        (item) => Component()
            .loadImage(imageUrl: item.url, height: 240, cornerRadius: 8), //Helper image loader method
      )
      .toList();

  return imageSliders;
}

static indicator(ListingModel item) {
  indicatorPositionScroll(item); //another helper methoad for indicator to scroll to spacific indicator
  Widget widget = Container(
    alignment: Alignment.center,
    height: 8,
    margin: EdgeInsets.only(bottom: 12),
    width: 144,
    child: ListView.builder(
      itemCount: item.images.length,
      scrollDirection: Axis.horizontal,
      controller: item.itemScrollController, //Here is our ScrollController object
      shrinkWrap: true,
      itemBuilder: (context, index) {
        return Container(
          width: 8,
          height: 8,
          margin: EdgeInsets.symmetric(horizontal: 4.0),
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: (Colors.white).withOpacity(
                  item.sliderCurrentPosition == index ? 1 : 0.6)),
        );
      },
    ),
  );

  return widget;
}

The next method creates a smooth scroll to a specific indicator position so, when we swipe the image, the indicator also scrolls to show relational movement. out selected item indicator always shows in the middle when we have a long indicator ListView.

static Future<void> indicatorPositionScroll(ListingModel item) async {
  if (item.itemScrollController.hasClients) {
    if (item.sliderCurrentPosition == 0) {
      item.itemScrollController.animateTo(0,
          duration: Duration(milliseconds: 1000), curve: Curves.ease);
    } else if (item.sliderCurrentPosition > 4) {
      double currentScroll = item.itemScrollController.position.pixels;
      currentScroll = (item.sliderCurrentPosition - 4) * 16;
      item.itemScrollController.animateTo(currentScroll,
          duration: Duration(milliseconds: 1000), curve: Curves.ease);
    }
  }
}

This code is made for mobile UI, You may find some problems in other views.