How to set dynamic autoplay interval for images separately.

[faisalmushtaq007]

I've tried to give separate dynamic autoplay duration to every image but its not taking effect. Below is the code snippet:

final List<dynamic> imgList = [
  {"img": 'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80', "time": 1,},
  {"img": 'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80', "time": 5,},
  {"img": 'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80', "time": 3,},
  {"img": 'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80', "time": 1,},
  {"img": 'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80', "time": 14,},
  {"img": 'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80', "time": 2},
];

class ImageSliderDemo extends StatefulWidget {
  @override
  State<ImageSliderDemo> createState() => _ImageSliderDemoState();
}

class _ImageSliderDemoState extends State<ImageSliderDemo> {
  int currentTime = imgList[0]["time"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Image slider demo')),
      body: Container(
          child: CarouselSlider(
        options: CarouselOptions(
          autoPlay: true,
          autoPlayInterval: Duration(seconds: currentTime),
          onPageChanged: (index, reason) {
            log("index: $index, time: ${imgList[index]["time"]}");
            setState(() {
              currentTime = imgList[index]["time"];
            });
          },
        ),
        items: imgList
            .map((item) => Container(
              width: MediaQuery.of(context).size.width,
                  child: Center(
                      child:
                          Image.network(item['img'], fit: BoxFit.cover, width: MediaQuery.of(context).size.width,)),
                ))
            .toList(),
      )),
    );
  }
}

Please resolve this

[GauravCalidig]

Hope this helps

[MatheusFelix1796]

I was able to solve this problem with the following:

On your state management you should have a variable, let's say "myValue" which will determine your carousel autoPlayInterval, and you would update its value (and then the widget will rebuild itself) whenever the page changed.

options: CarouselOptions(
  //other options here
  carouselController: carouselController,
  autoPlayInterval: Duration(seconds: myValue),
  onPageChanged: (index, reason) {
    //set your new value here, for example: myValue = item[index].time;
    if (reason == CarouselPageChangedReason.controller) {
      //if you are changing pages via controller.nextPage() or controller.previousPage() then it works without problem. I was having problem with manual scrolling or after it changed automatically when the current item's autoPlayInterval time has elapsed, which are the CarouselPageChangedReason.timed and .manual reasons of page changed.
    }
    else {
      //we call animateToPage(index) to the new index (it's an animate to the same position, the same index which now is the current one after the page changed and it works!)
      carouselController!.animateToPage(index);
    }
  },
),

Hope it helps :)