my_animated_text

✨ A Flutter package offering a collection of customizable animated text widgets to enhance your app's UI with engaging text animations.

📦 Features

SlideText: Slides text in from left to right or right to left.
TypewriterText: Simulates a typewriter effect, revealing text character by character.
WaveMotionText: Applies a sinusoidal wave motion to each character.
WavingGradientText: Applies a waving gradient effect to the text.
ShimmerText: Creates a shimmer shine effect.
FadeText: Fades text in/out.
ScaleText: Scales text up and down.
RotationText: Rotates text back and forth.
MarqueeText: Moves text horizontally like a marquee.
FallingText: Makes each character fall into place.
ColorizedText: Animates text through multiple colors.
BouncingText: Animates each character with a bouncing effect.
ShadowText: Animates text shadows.
CirclingText: Animates text in a circular path.
MultiAnimatedText: Combine multiple effects for a single text widget (e.g., Falling + Colorized).

Attribute

Property	Type	Default	Description
`text`	`String`	—	The text content to animate
`duration`	`Duration`	`Duration(milliseconds: 2000)`	Duration of the animation. Ignored if an external controller is provided
`style`	`TextStyle?`	`null`	Optional text style
`mode`	`AnimatedTextMode`	`AnimatedTextMode.forward`	Defines how the animation plays (forward, reverse, loop, etc.)
`autoStart`	`bool`	`true`	Automatically start animation on widget initialization
`controller`	`AnimationController?`	`null`	Optional external AnimationController; if null, one is created internally
`onStarted`	`VoidCallback?`	`null`	Callback triggered when the animation starts
`onCompleted`	`VoidCallback?`	`null`	Callback triggered when the animation completes
`onRepeated`	`VoidCallback?`	`null`	Callback triggered when the animation repeats (loop/reverse)

📥 Installation

Add the following dependency to your pubspec.yaml:

dependencies:
  my_animated_text: ^{version}

or run below in your terminal

 $ flutter pub add my_animated_text

Then, run:

 $ flutter pub get

🧪 Usage

Import the package:

import 'package:my_animated_text/my_animated_text.dart';

SlideText

SlideText(
  'Hello, World!',
  direction: SlideDirection.leftToRight,
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

TypewriterText

TypewriterText(
  'Hello, World!',
  duration: Duration(seconds: 5),
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

WaveMotionText

WaveMotionText(
  'Hello, World!',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

WavingGradientText

WavingGradientText(
  'Hello, World!',
  colors: [Colors.red, Colors.blue, Colors.green],
  direction: WavingDirection.leftToRight,
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

ShimmerText

ShimmerText(
  'Shimmering Text',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

FadeText

FadeText(
  'Fading Text',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

ScaleText

ScaleText(
  'Scaling Text',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

RotationText

RotationText(
  'Rotating Text',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  rotationDirection: RotationDirection.custom,
  rotationDegrees: 180, 
)

CirclingText(
    'Circling Text Circling Text ',
    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
    mode: AnimatedTextMode.loop,
    direction: CirclingDirection.clockwise,
    radius: 45,
),

MarqueeText

MarqueeText(
  'Scrolling Text',
  speed: 50,
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

FallingText

FallingText(
  'Falling Text',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

ColorizedText

ColorizedText(
  'Colorful Text',
  colors: [Colors.red, Colors.yellow, Colors.blue],
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

BouncingText

BouncingText(
  'Bouncing Text',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
)

ShadowText

ShadowText(
  'Shadow Text',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  mode: AnimatedTextMode.reverseLoop,
)

MultiAnimatedText

MultiAnimatedText(
  'Falling & Colorized!',
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  effects: [  
    FallingEffect(),
    ColorizeEffect(colors: [Colors.red, Colors.yellow, Colors.blue])
  ],
  mode: AnimatedTextMode.loop,
)

BouncingText(
  'Bounce Effect with Fade and Colorized!',
).withEffects([FadeEffect(), ColorizeEffect()]),

📄 Example Project

For a complete example demonstrating all animated text widgets, check out the example directory in this repository.

🔧 Development

To contribute or run the example locally:

Clone the repository:

git clone https://github.com/tz-thantzin/my_animated_text.git
cd my_animated_text

Install dependencies:

flutter pub get

Run the example:

flutter run

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

📣 Acknowledgments

Inspired by various Flutter animation libraries.
Special thanks to the Flutter community for their continuous support.

🌐 Links

GitHub Home: https://github.com/tz-thantzin
Repository: https://github.com/tz-thantzin/my_animated_text