How to set dynamic time for every page

[MudasarRather]

final List 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(), )), ); } }

[GauravCalidig]

Hi I am handling it like this , Hope this helps

[MudasarRather]

bro , i also handles same, Actually Carousel Uses Timer, we cannot change time dynamically in Timer but if u want to change you need to rerender whole component

[MatheusFelix1796]

I got the exact same problem and found a solution:

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! :)