iOS Development
android – Flutter animation on textual content (identical like Shazam app has)

The Shazam app has animated textual content that vertically rotates. I wish to replicate this in my Flutter app. Consult with the connected picture.
Shazam app animation
I’ve tried animated_text_kit with the next code.
DefaultTextStyle(
fashion: const TextStyle(
fontSize: 40.0,
fontFamily: 'Horizon',
),
little one: AnimatedTextKit(
animatedTexts: [
RotateAnimatedText('Tap to Shazam'),
RotateAnimatedText('Long press to Auto Shazam')
]
),
),
I tried to unravel the issue using ChatGPT with the next code. I tried to switch the code to supply the specified output however failed.
class ShazamAnimation extends StatefulWidget {
@override
_ShazamAnimationState createState() => _ShazamAnimationState();
}
class _ShazamAnimationState extends State<ShazamAnimation> {
Checklist<String> statements = [
"Tap to Shazam",
"Identifying Music",
"Connecting to Database",
"Enjoy Your Music",
];
int currentStatementIndex = 0;
PageController _controller = PageController();
@override
void initState() {
tremendous.initState();
// Begin the animation by scheduling statements with a timer.
Timer.periodic(Period(seconds: 3), (timer) {
if (currentStatementIndex < statements.size - 1) {
currentStatementIndex++;
} else {
currentStatementIndex = 0;
}
_controller.nextPage(
period: Period(seconds: 1),
curve: Curves.easeInOut,
);
});
}
@override
Widget construct(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.middle,
youngsters: [
Container(
height: 50, // Adjust the height as needed
child: PageView.builder(
controller: _controller,
itemCount: statements.length,
itemBuilder: (context, index) {
return Center(
child: AnimatedStatement(statement: statements[currentStatementIndex]),
);
},
),
),
],
);
}
}
class AnimatedStatement extends StatelessWidget {
ultimate String assertion;
AnimatedStatement({required this.assertion});
@override
Widget construct(BuildContext context) {
return SlideTransition(
place: Tween<Offset>(
start: Offset(0, 1),
finish: Offset(0, 0),
).animate(CurvedAnimation(
dad or mum: ModalRoute.of(context)!.animation!,
curve: Interval(0.0, 1.0, curve: Curves.easeInOut),
)),
little one: FadeTransition(
opacity: CurvedAnimation(
dad or mum: ModalRoute.of(context)!.animation!,
curve: Interval(0.5, 1.0, curve: Curves.easeInOut),
),
little one: Textual content(
assertion,
fashion: TextStyle(
fontSize: 20,
fontWeight: FontWeight.daring,
),
),
),
);
}
}
Credit: www.ismmailgsm.com