Terranic
commented
2 years ago 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
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(), ), ); }, )