How to implement multiple AnimationControllers in flutter GetxController - flutter

Question

I want to implement multiple animations with animation controllers by using getXController in flutter dart, but when I run the application it says animation controllers are paused and when I click on one of my TextFormFields animation controllers will work for just one second, and all of the data that I have entered in TextFormFields are removed.
This is my code LoginController code.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
class LoginController extends GetxController with GetTickerProviderStateMixin //
{
late final Rx<AnimationController> _controller1;
late final Rx<AnimationController> _controller2;
late Rx<Animation<double>> _animation1;
late Rx<Animation<double>> _animation2;
late Rx<Animation<double>> _animation3;
late Rx<Animation<double>> _animation4;
get controller1 => _controller1.value;
set controller1(value) => _controller1.value = value;
get controller2 => _controller2.value;
set controller2(value) => _controller2.value = value;
get animation1 => _animation1.value;
set animation1(value) => _animation1.value = value;
get animation2 => _animation2.value;
set animation2(value) => _animation2.value = value;
get animation3 => _animation3.value;
set animation3(value) => _animation3.value = value;
get animation4 => _animation4.value;
set animation4(value) => _animation4.value = value;
#override
void onInit() {
super.onInit();
_controller1 = AnimationController(
vsync: this,
duration: const Duration(
seconds: 5,
),
).obs;
_animation1 = (Tween<double>(begin: .1, end: .15).animate(
CurvedAnimation(
parent: controller1,
curve: Curves.easeInOut,
),
)
..addListener(() => update())
..addStatusListener(
(status) {
if (status == AnimationStatus.completed) {
update([controller1.reverse()]);
} else if (status == AnimationStatus.dismissed) {
update([controller1.forward()]);
}
},
))
.obs;
_animation2 = (Tween<double>(begin: .02, end: .04).animate(
CurvedAnimation(
parent: controller1,
curve: Curves.easeInOut,
),
)..addListener(() => update()))
.obs;
_controller2 = AnimationController(
vsync: this,
duration: const Duration(
seconds: 5,
),
).obs;
_animation3 = (Tween<double>(begin: .41, end: .38).animate(
CurvedAnimation(
parent: controller2,
curve: Curves.easeInOut,
),
)
..addListener(() => update())
..addStatusListener(
(status) {
if (status == AnimationStatus.completed) {
update([controller2.reverse()]);
} else if (status == AnimationStatus.dismissed) {
update([controller2.forward()]);
}
},
))
.obs;
_animation4 = (Tween<double>(begin: 170, end: 190).animate(
CurvedAnimation(
parent: controller2,
curve: Curves.easeInOut,
),
)..addListener(() => update()))
.obs;
Timer(
const Duration(milliseconds: 2500),
() {
update([controller1.reverse()]);
},
);
update([controller1.forward()]);
}
#override
void onReady() {
super.onReady();
}
#override
void onClose() {
controller1.dispose();
controller2.dispose();
super.onClose();
}
}
and this is my GetViewPage.
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(
const MaterialApp(
home: LoginPage(),
title: 'Login Page',
),
);
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.light,
),
);
}
class LoginPage extends GetView<LoginController> {
final String? action;
const LoginPage({Key? key, this.action}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
final _userController = TextEditingController();
final _passwordController = TextEditingController();
return Scaffold(
backgroundColor: darkBackGround,
body: Form(
child: ScrollConfiguration(
behavior: Behavior(),
child: SingleChildScrollView(
child: SizedBox(
height: size.height,
child: Stack(
children: [
Positioned(
top: size.height * (controller.animation2.value + .58),
left: size.width * .21,
child: CustomPaint(
painter: CustomizedPainter(
radius: 50,
color1: darkLinearCustomPaintColor1,
color2: darkLinearCustomPaintColor2,
),
),
),
Positioned(
top: size.height * .98,
left: size.width * .1,
child: CustomPaint(
painter: CustomizedPainter(
radius: controller.animation4.value - 30,
color1: darkLinearCustomPaintColor1,
color2: darkLinearCustomPaintColor2,
),
),
),
Positioned(
top: size.height * .5,
left: size.width * (controller.animation2.value + .8),
child: CustomPaint(
painter: CustomizedPainter(
radius: 30,
color1: darkLinearCustomPaintColor1,
color2: darkLinearCustomPaintColor2,
),
),
),
Positioned(
top: size.height * controller.animation3.value,
left: size.width * (controller.animation1.value + .1),
child: CustomPaint(
painter: CustomizedPainter(
radius: 60,
color1: darkLinearCustomPaintColor1,
color2: darkLinearCustomPaintColor2,
),
),
),
Positioned(
top: size.height * .1,
left: size.width * .8,
child: CustomPaint(
painter: CustomizedPainter(
radius: controller.animation4.value,
color1: darkLinearCustomPaintColor1,
color2: darkLinearCustomPaintColor2,
),
),
),
Column(
children: [
Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.only(top: size.height * .1),
child: Text(
'',
style: TextStyle(
color: Colors.black.withOpacity(.7),
fontSize: 30,
fontWeight: FontWeight.bold,
letterSpacing: 1,
wordSpacing: 4,
fontFamily: 'pacific',
),
),
),
),
Expanded(
flex: 7,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
DarkThemeInput(
icon: Icons.account_circle_outlined,
hintText: 'User',
isPassword: false,
isEmail: false,
isPhone: false,
controller: _userController,
validator: (String? value) {
if (value!.isEmpty) {
return 'Enter your username or Email ';
}
return '';
},
),
DarkThemeInput(
icon: Icons.lock_outline,
hintText: 'Password...',
isPassword: true,
isEmail: false,
isPhone: false,
controller: _passwordController,
validator: (String? value) {
if (value!.isEmpty) {
return 'Password must be filled';
}
if (value.length < 6) {
return 'Enter more characters';
}
return '';
}),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DarkThemeButton(
text: 'LOGIN', width: 2.58, onTap: () {}),
SizedBox(width: size.width / 20),
DarkThemeButton(
text: 'Forgotten password!',
width: 2.58,
onTap: () {},
),
],
),
],
),
),
Expanded(
flex: 6,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
DarkThemeButton(
text: 'Create a new Account',
width: 2,
onTap: () {
Get.toNamed('/signup');
},
),
SizedBox(height: size.height * .05),
],
),
),
],
),
],
),
),
),
),
),
);
}
}
I want to notice that DarkThemeInput is a customized TextFormField and when I press them animation controllers work just for one second.