How to animate text in flutter simple animation?

Flutter is a powerful platform for building engaging and interactive user interfaces. One popular type of animation in Flutter is text animation, which can be used to add a dynamic and eye-catching element to your app. In this article, we’ll go over how to create a simple text animation step by step in Flutter.

Step 1: Create a new Flutter project

To get started, create a new Flutter project in your IDE of choice. You can do this by selecting “New Flutter Project” from the file menu or using the Flutter command line tool.

Step 2: Create a Stateful Widget

Once you have a new Flutter project set up, create a new Stateful Widget called TextAnimation. This widget will be responsible for animating the text on the screen.

import 'package:flutter/material.dart';

class TextAnimation extends StatefulWidget {
  @override
  _TextAnimationState createState() => _TextAnimationState();
}

class _TextAnimationState extends State<TextAnimation> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Step 3: Add the Text Widget

Next, add a Text widget to the build method of the TextAnimation widget. This will display the text that we will be animating.

@override
Widget build(BuildContext context) {
  return Container(
    child: Text(
      "flutterfevr.com",
      style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.bold),
    ),
  );
}

Step 4: Create the Animation Controller and Tween

To animate the text, we will need to create an AnimationController and a Tween object. The AnimationController controls the duration and speed of the animation, and the Tween interpolates the value of the animation.

In the initState method, we create a new AnimationController with a duration of 1 second and set it to repeat in reverse. We also create a new Tween object that interpolates the value of the animation from 0.0 to 1.0.

Step 5: Wrap the Text Widget in an AnimatedBuilder

Now we can start animating the text. Wrap the Text widget in an AnimatedBuilder widget, which takes the Animation object as a parameter. This allows us to rebuild the widget tree on each frame of the animation.

Complete Code

import 'package:flutter/material.dart';

void main() => runApp(TextAnimation());




class TextAnimation extends StatefulWidget {
  @override
  _TextAnimationState createState() => _TextAnimationState();
}

class _TextAnimationState extends State<TextAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..repeat(reverse: true);
    _animation = Tween<Offset>(
      begin: Offset.zero,
      end: Offset(0.0, 1.0),
    ).animate(_animationController);
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: SlideTransition(
          position: _animation,
          child: Text(
            "Flutterfever.com",
            style: TextStyle(fontSize: 40.0, fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }
}