animation does not work while setting setState() in onPageChanged()
while changing the current index in setState of the onPageChanged method it does not animate smoothly. it gets stuck sometimes.
Here is my Carousel_ Slider code
CarouselSlider.builder( carouselController: _controller, options: CarouselOptions( aspectRatio: 2.0, enlargeCenterPage: true, viewportFraction: 1, // autoPlay: true, autoPlayCurve: Curves.linear, enableInfiniteScroll: false, height: mediaQueryData(context).height * 0.27, pauseAutoPlayOnTouch: true, pauseAutoPlayOnManualNavigate: true, onPageChanged: (index, reason) { setState(() { _current = index; }); }, ), itemCount: (imgList.length / 2).round(), itemBuilder: (context, index, realIdx) { final int first = index * 2; final int second = first + 1; return Padding( padding: const EdgeInsets.symmetric(horizontal: 5.0, vertical: 8), child: Row( children: [first, second].map((idx) { return Expanded( flex: 1, child: ClipRRect( borderRadius: BorderRadius.all( Radius.circular(12.0), ), child: Container( margin: EdgeInsets.symmetric(horizontal: 3), child: Stack( children: [ Container( height: double.infinity, child: ClipRRect( borderRadius: BorderRadius.all( Radius.circular(12.0), ), child: Image.network(imgList[idx], fit: BoxFit.cover), ), ), Positioned( bottom: 0.0, left: 0.0, right: 0.0, child: Container( height: 100, decoration: BoxDecoration( borderRadius: BorderRadius.all( Radius.circular(12.0), ), gradient: LinearGradient( colors: [ Color.fromARGB(200, 0, 0, 0), Color.fromARGB(0, 0, 0, 0) ], begin: Alignment.bottomCenter, end: Alignment.topCenter, ), ), padding: EdgeInsets.symmetric( vertical: 10.0, horizontal: 20.0), child: Text( 'No. ${imgList.indexOf(idx.toString())} image', style: TextStyle( color: Colors.white, fontSize: 11.0, fontWeight: FontWeight.bold, ), ), ), ), ], ), ), ), ); }).toList(), ), ); }, )
I have the same problem - however that Problem only surfaces on Tablet and Web. Using a phone emulator works well (or Android API/Web depending?)
The follwowing code leads to multiple "instant animations"
onPageChanged(int index, CarouselPageChangedReason reason) { dev.log("$index ${reason.toString()}"); currentIcon = index; descriptionText = goals?.goals?[index].long! ?? ""; setState(() {}); }
[log] 9 CarouselPageChangedReason.timed [log] 7 CarouselPageChangedReason.timed [log] 4 CarouselPageChangedReason.timed [log] 2 CarouselPageChangedReason.timed [log] 0 CarouselPageChangedReason.timed [log] 1 CarouselPageChangedReason.timed [log] 0 CarouselPageChangedReason.timed [log] 16 CarouselPageChangedReason.timed D/EGL_emulation( 8108): app_time_stats: avg=15.70ms min=5.64ms max=64.89ms count=45 [log] 14 CarouselPageChangedReason.timed