I have created an image slider using CarouselSlider, I want to set animation when the page change but when the page change it will not reflect to the dot indicator
slider and dot position
here is the full code of my slider
final RxInt _current = 0.obs;
PageController pageViewController = PageController();
final CarouselController _controller = CarouselController();
@override
void initState() {
super.initState();
WidgetsBinding.instance!.addPostFrameCallback((_) {
for (var imageUrl in images) {
precacheImage(NetworkImage(imageUrl), context);
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Slider demo')),
body: Obx(
() => Stack(
children: [
Positioned(
bottom: 40.0,
left: 0.0,
right: 0.0,
child: Padding(
padding: const EdgeInsets.only(top: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSmoothIndicator(
activeIndex: _current.value,
count: images.length,
effect: ExpandingDotsEffect(
radius: 10,
dotWidth: 10,
dotHeight: 10,
activeDotColor: Colors.green,
expansionFactor: 4,
dotColor: Colors.green.withOpacity(0.17),
), // your preferred effect
onDotClicked: (index) {
pageViewController.animateToPage(
index,
duration: const Duration(milliseconds: 500),
curve: Curves.ease,
);
},
)
],
),
),
),
Padding(
padding: const EdgeInsets.only(top: 50),
child: Expanded(
child: Container(
child: CarouselSlider.builder(
itemCount: images.length,
carouselController: _controller,
options: CarouselOptions(
autoPlay: true,
aspectRatio: 14 / 8.5,
viewportFraction: 0.8,
enlargeCenterPage: true,
autoPlayAnimationDuration: const Duration(seconds: 2),
autoPlayInterval: const Duration(seconds: 4),
autoPlayCurve: Curves.easeInOutSine,
onPageChanged: (index, reason) {
_current.value = index;
},
scrollPhysics: const BouncingScrollPhysics(),
),
itemBuilder: (context, index, realIdx) {
return index == _current.value
? ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: [
Image.network(
images[index],
fit: BoxFit.cover,
width: 1000,
height: 170,
)
],
),
)
: Padding(
padding: const EdgeInsets.only(top: 25),
child: Container(
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(5.0)),
child: Stack(
children: [
Image.network(
images[index],
fit: BoxFit.cover,
width: 1000,
height: 172,
)
],
),
),
),
);
},
)),
),
),
],
),
),
);
}
