Flutter Linear progress indicator for each page of pageview builder - flutter

Question

I want to build a progress indicator for each page of the pageview builder. Pageview changes after 10 seconds and the progress bar shifts to the next bar. I have successfully implemented this, but encounter an issue of 4 bars loading at the same time, while going back and forth to the page view screen or when I minimize and reopen the app.
This is what I already have achieved with the following code:
This is my code:
class WelcomeScreen extends StatefulWidget {
const WelcomeScreen({Key? key}) : super(key: key);
#override
State<WelcomeScreen> createState() => _WelcomeScreenState();
}
class _WelcomeScreenState extends State<WelcomeScreen>
with TickerProviderStateMixin {
final WelcomeController controller = Get.put(WelcomeController());
late AnimationController animationControllerOne;
late AnimationController animationControllerTwo;
late AnimationController animationControllerThree;
late AnimationController animationControllerFour;
late Animation<double> animation;
#override
void initState() {
super.initState();
animationControllerOne =
AnimationController(duration: const Duration(seconds: 10), vsync: this);
animation = Tween(begin: 0.0, end: 1.0).animate(animationControllerOne)
..addListener(() {
setState(() {
});
});
animationControllerOne.forward();
animationControllerTwo =
AnimationController(duration: const Duration(seconds: 10), vsync: this);
animation = Tween(begin: 1.0, end: 2.0).animate(animationControllerTwo)
..addListener(() {
setState(() {
});
});
Timer(const Duration(seconds: 10), () {
animationControllerTwo.forward();
});
animationControllerThree =
AnimationController(duration: const Duration(seconds: 10), vsync: this);
animation = Tween(begin: 2.0, end: 3.0).animate(animationControllerThree)
..addListener(() {
setState(() {});
});
Timer(const Duration(seconds: 20), () {
animationControllerThree.forward();
});
animationControllerFour =
AnimationController(duration: const Duration(seconds: 10), vsync: this);
animation = Tween(begin: 3.0, end: 4.0).animate(animationControllerFour)
..addListener(() {
setState(() {});
});
Timer(const Duration(seconds: 30), () {
animationControllerFour.forward();
});
animationControllerFour.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationControllerOne.reset();
animationControllerTwo.reset();
animationControllerThree.reset();
animationControllerFour.reset();
animationControllerOne.forward();
}
animationControllerOne.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationControllerTwo.reset();
animationControllerTwo.forward();
}
});
animationControllerTwo.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationControllerThree.reset();
animationControllerThree.forward();
}
});
animationControllerThree.addStatusListener((status) {
if (status == AnimationStatus.completed) {
animationControllerFour.reset();
animationControllerFour.forward();
}
});
});
}
#override
void dispose() {
animationControllerOne.dispose();
animationControllerTwo.dispose();
animationControllerThree.dispose();
animationControllerFour.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: context.theme.scaffoldBackgroundColor,
appBar: AppBar(
systemOverlayStyle: SystemUiOverlayStyle(
statusBarColor: Get.isDarkMode ? darkBackground : lightBackground,
statusBarIconBrightness:
Get.isDarkMode ? Brightness.light : Brightness.dark,
),
title: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Row(
key: const Key('loading bar'),
children: [
Expanded(
child: LinearProgressIndicator(
color: primaryBlue,
backgroundColor: const Color(0xFFD9D9D9),
minHeight: 8,
value: animationControllerOne.value,
),
),
const SizedBox(
width: 10,
),
Expanded(
child: LinearProgressIndicator(
color: primaryBlue,
backgroundColor: const Color(0xFFD9D9D9),
minHeight: 8,
value: animationControllerTwo.value,
),
),
const SizedBox(
width: 10,
),
Expanded(
child: LinearProgressIndicator(
color: primaryBlue,
backgroundColor: const Color(0xFFD9D9D9),
minHeight: 8,
value: animationControllerThree.value,
),
),
const SizedBox(
width: 10,
),
Expanded(
child: LinearProgressIndicator(
backgroundColor: const Color(0xFFD9D9D9),
color: primaryBlue,
minHeight: 8,
value: animationControllerFour.value,
),
),
],
),
),
elevation: 0,
backgroundColor: Get.isDarkMode ? darkBackground : lightBackground,
centerTitle: true,
),
body: Padding(
padding: const EdgeInsets.symmetric(vertical: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Welcome to Demonstration Bank!'.tr,
key: const Key('message'),
textAlign: TextAlign.center,
style: TextStyle(
color: Get.isDarkMode ? lightBackground : darkBackground,
fontSize: Get.height * 0.027,
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: Get.height * 0.05,
),
SizedBox(
height: Get.height * 0.4,
width: Get.width * 0.8,
child: PageView.builder(
controller: controller.gifsController,
physics: const NeverScrollableScrollPhysics(),
itemCount: controller.images.length,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Image.asset(
controller.images[index],
fit: BoxFit.fitWidth,
);
},
),
),
SizedBox(
height: Get.height * 0.15,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomButton(
key: const Key('sign in button'),
height: Get.height * 0.069,
width: Get.width * 0.335,
fontSize: Get.height * 0.021,
color: Get.isDarkMode ? lightBackground : darkBackground,
textColor: Get.isDarkMode ? darkBackground : lightBackground,
text: 'Sign in'.tr,
onPressed: () => Get.to(() => const SigninScreen()),
),
const SizedBox(
width: 19,
),
CustomButton(
key: const Key('sign up button'),
height: Get.height * 0.069,
width: Get.width * 0.335,
fontSize: Get.height * 0.021,
color: primaryBlue,
textColor: Colors.white,
text: 'Sign Up'.tr,
onPressed: () => Get.to(() => CreateAccountScreen()),
),
],
),
const SizedBox(
height: 24,
),
],
),
),
);
}
}
Unexpected result: ( Note: this problem does not happen always )