animate a widget continuously different size - flutter

Question

i am trying to create a splash screen that contain animation, of 3 widget.
i notice this:
if the 1st widget animate up the 2nd widget will animate down continuously
while the 3rd flip from right to lift.
How do i move 2 widget with little animation. i using stack with positioned widget in the design.
here is the design code:
Scaffold(
body: Container(
height: double.infinity,
width: double.infinity,
child: Stack(
children: [
SizedBox.expand(
child: Image.asset(
"assets/images/splash.png",
fit: BoxFit.fill,
),
),
Positioned(
right: -150,
child: Transform.rotate(
angle: -math.pi / 4.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 10,
width: 300,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.5),
borderRadius: BorderRadius.circular(20),
),
),
SizedBox(
height: 15,
),
Container(
height: 25,
width: 400,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
),
),
SizedBox(
height: 15,
),
Container(
height: 15,
width: 210,
decoration: BoxDecoration(
color: Colors.white.withOpacity(0.9),
borderRadius: BorderRadius.circular(20),
),
)
],
),
),
),
Positioned(
left: 0,
right: 0,
bottom: 10,
top: -120,
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Un',
style: TextStyle(
color: Colors.white,
fontSize: 45.sp,
fontWeight: FontWeight.w500),
),
SizedBox(
width: 5,
),
Animator(
tween: Tween(begin: 0.0, end: 6.35),
cycles: 1,
duration: Duration(seconds: 8),
builder: (context, anim, child) => Transform.rotate(
angle: 0,
child: child,
),
child: SvgPicture.asset(
"assets/white_lgo.svg",
width: 50.w,
height: 35.h,
),
),
SizedBox(
width: 5,
),
Text(
'leap',
style: TextStyle(
color: Colors.white,
fontSize: 45.sp,
fontWeight: FontWeight.w500),
),
],
),
),
),
Positioned(
left: -140,
bottom: 320,
child: Transform.rotate(
angle: -math.pi / 4.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 10,
width: 140,
decoration: BoxDecoration(
color: Color(0xff103E3F),
borderRadius: BorderRadius.circular(20),
),
),
SizedBox(
height: 15,
),
Container(
height: 25,
width: 70,
decoration: BoxDecoration(
color: Color(0xff103E3F),
borderRadius: BorderRadius.circular(20),
),
),
SizedBox(
height: 15,
),
Container(
height: 13,
width: 300,
decoration: BoxDecoration(
color: Color(0xff103E3F),
borderRadius: BorderRadius.circular(20),
),
)
],
),
),
),
],
),
),
);
the animation i am trying to achieve
expected
thanks

Answer 1

You should create an animationController like this:
late final AnimationController animationController = AnimationController(
duration: const Duration(milliseconds: 1000),
vsync: this,
);
and then add an animation. This code will generate numbers and you can use these numbers writing _doubleAnimation.value wherever you wanna change. For Example:
late final Animation<double> _doubleAnimation = Tween<double>(
begin: 0.0,
end: 6.34,
).animate(CurvedAnimation(
parent: animationController,
curve: Curves.fastOutSlowIn,
));
and run this function for infinity animation in initState:
animationController.repeat(reverse: true);
If you don't wanna reverse animation, you can change reverse to false.
Lastly, do not forget to use TickerProviderStateMixin. Also, you can take some help from here