Animated Smooth Indicator not Working ? FLUTTER - flutter

Question

I'm building an app with a PageView Widget and I wanted to add AnimatedSmoothIndicator.
I added a CarouseLslider to the pageView to make it auto run
but it never changes .. I tried a lot of methods but none of them work
can anyone help..
class FoodPageBody extends StatefulWidget {
const FoodPageBody({Key? key}) : super(key: key);
#override
State<FoodPageBody> createState() => _FoodPageBodyState();
}
class _FoodPageBodyState extends State<FoodPageBody> {
PageController pageController = PageController(viewportFraction: 1);
int activeIndex = 0;
//------------------------------------------------------------------------------
#override
Widget build(BuildContext context) {
return SizedBox(
height: 340,
child: PageView.builder(
controller: pageController,
itemCount: 5,
itemBuilder: (context, position) {
return _bulidPageItem(position);
}),
);
}
Widget _bulidPageItem(int index) {
//------------------------------------------------------------------------------
// Slide image 🚩
return Column(
children: [
CarouselSlider(
options: CarouselOptions(
onPageChanged: (index, reason) {
setState(() {
activeIndex = index;
});
},
enlargeStrategy: CenterPageEnlargeStrategy.height,
enableInfiniteScroll: true,
enlargeCenterPage: true,
autoPlayCurve: Curves.ease,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 5),
height: 320,
),
items: [
Stack(
alignment: Alignment.topCenter,
children: [
Container(
margin: const EdgeInsets.only(left: 5, right: 5),
height: 220,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: index.isEven
? const Color(0xFFffd28d)
: const Color(0xFF89dad0),
image: const DecorationImage(
image: AssetImage('images/chineseFood.jpg'),
fit: BoxFit.cover),
),
),
//------------------------------------------------------------------------------
// Slide Information 🚩
Align(
alignment: Alignment.bottomCenter,
child: Container(
margin:
const EdgeInsets.only(left: 20, right: 20, bottom: 15),
height: 130,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.3),
blurRadius: 6,
spreadRadius: 0.7,
offset: const Offset(1, 4))
],
borderRadius: BorderRadius.circular(25),
color: Colors.white,
),
//------------------------------------------------
// Slider title
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const BigText(
text: 'Chinese side',
),
//----------------------------------------------
// Slider Rating
const SizedBox(height: 10),
Row(
children: [
Wrap(
children: List.generate(
5,
(index) => const Icon(Icons.star,
color: AppColor.mainColor, size: 12),
),
),
const SizedBox(width: 10),
SmallText(text: 4.5.toString()),
const SizedBox(width: 10),
const SmallText(text: '1287 comments'),
],
),
const SizedBox(height: 20),
//----------------------------------------------
// Slider Icons
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: const [
SliderIcons(
color: AppColor.iconColor1,
text: 'Normal',
icon: Icons.circle),
SliderIcons(
color: AppColor.mainColor,
text: '1.7km',
icon: Icons.location_pin),
SliderIcons(
color: AppColor.iconColor2,
text: '32min',
icon: FontAwesomeIcons.clock),
],
),
],
),
),
),
),
],
),
],
),
//------------------------------------------------------------------------------
// Slider Dots 🚩
AnimatedSmoothIndicator(
activeIndex: activeIndex,
count: 5,
effect: const WormEffect(),
)
],
);
}
}

Answer 1

The issue is here, the CarouselSlider's items is just one of this snippet. Therefore, onPageChanged active index is always getting 0.
To have five items, we need to generate item here.
I think pageView is not necessary for this case.
#override
Widget build(BuildContext context) {
return SizedBox(height: 340, child: _bulidPageItem());
}
Widget _bulidPageItem() {
//------------------------------------------------------------------------------
// Slide image 🚩
return Column(
children: [
CarouselSlider(
carouselController: carouselController,
options: CarouselOptions(
onPageChanged: (index1, reason) {
debugPrint("on Page changed $index1");
setState(() {
activeIndex = index1;
});
},
),
items: List.generate(
5,
(index) => Stack(