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

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button