my_animated_text 3.0.0

A Flutter package with customizable animated text widgets for dynamic and engaging text effects.

my_animated_text

     

The preview above combines effects. The gallery below shows each animation separately. The original full showcase GIF is also available.

✨ 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.
• BlurText: Brings text into focus with an animated blur.
• FlipText: Adds a 3D-style flip reveal on the X or Y axis.
• ShakeText: Adds a damped shake for alerts and attention states.
• ScrambleText / .scramble(): Decodes text through changing symbols with a configurable reveal order.
• CirclingText: Animates text in a circular path.
• MultiAnimatedText: Combine multiple effects for a single text widget (e.g., Falling + Colorized).
• AnimateText / String.animate(): Chain effects with a fluent API and predictable timing windows.
• AnimatedTextCarousel: Rotate between phrases with a timed, animated transition or manual controls.

---

Effect previews

These GIFs were recorded from the Flutter effect preview app. Each effect preview also represents its matching fluent method, such as SlideText and .slide().

Effect	Effect
SlideText	TypewriterText
WaveMotionText	WavingGradientText
ShimmerText	FadeText
ScaleText	RotationText
MarqueeText	FallingText
ColorizedText	BouncingText
ShadowText	BlurText
FlipText	ShakeText
ScrambleText	CirclingText
MultiAnimatedText	AnimateText / String.animate()
AnimatedTextCarousel

---

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: ^3.0.0

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';

AnimatedTextCarousel

Cycle through short messages automatically, pause while the pointer is over the text, or advance manually. Keep the key in your widget's state so it stays attached across rebuilds:

class PhraseCarousel extends StatefulWidget {
  const PhraseCarousel({super.key});

  @override
  State<PhraseCarousel> createState() => _PhraseCarouselState();
}

class _PhraseCarouselState extends State<PhraseCarousel> {
  final carouselKey = GlobalKey<AnimatedTextCarouselState>();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        AnimatedTextCarousel(
          key: carouselKey,
          phrases: const [
            'Build with care',
            'Ship with confidence',
            'Keep exploring',
          ],
          interval: const Duration(seconds: 2),
          pauseOnHover: true,
          onChanged: (index) => debugPrint('Showing phrase $index'),
        ),
        IconButton(
          tooltip: 'Next phrase',
          onPressed: () => carouselKey.currentState?.next(),
          icon: const Icon(Icons.arrow_forward),
        ),
      ],
    );
  }
}

previous() moves back and show(index) selects a phrase, wrapping the index into range. Manual navigation starts a fresh interval before the next automatic change. The example app shows both controls alongside the existing effect demos.

Scramble reveal

Use ScrambleText for a complete reveal, or .scramble() to add it to a fluent timeline. The effect keeps whitespace in place and resolves Unicode grapheme clusters together. seed makes the random order and replacement symbols repeatable.

ScrambleText(
  'MAKE EVERY WORD COUNT',
  reveal: ScrambleReveal.random,
  seed: 17,
  cyclesPerSecond: 24,
  duration: const Duration(milliseconds: 2800),
  mode: AnimatedTextMode.loop,
  style: const TextStyle(fontFamily: 'monospace', fontSize: 24),
)

'Launch with clarity'
    .animate(duration: const Duration(seconds: 4))
    .scramble(
      reveal: ScrambleReveal.leftToRight,
      duration: const Duration(seconds: 2),
    );

In the fluent example, the resolved text stays visible for the remaining two seconds of each loop. The focused preview used for the GIF is in example/lib/scramble_demo.dart.

Fluent multi-effect composition

'Launch faster'.animate(
  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  duration: Duration(milliseconds: 2600),
)
    .blur(duration: Duration(milliseconds: 500), advanceCursor: false)
    .flip(duration: Duration(milliseconds: 700), advanceCursor: false)
    .shimmer(delay: Duration(milliseconds: 200), advanceCursor: false)
    .then(delay: Duration(milliseconds: 120))
    .shake(duration: Duration(milliseconds: 450));

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

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

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(begin: 0.0, end: 0.45),
    ColorizeEffect(
      colors: [Colors.red, Colors.yellow, Colors.blue],
      begin: 0.2,
      end: 1.0,
    ),
  ],
  mode: AnimatedTextMode.loop,
)

BouncingText(
  'Bounce Effect with Fade and Colorized!',
).withEffects([
  const FadeEffect(begin: 0.0, end: 0.35),
  ColorizeEffect(begin: 0.0, end: 1.0),
]);

Fluent composition

'Hello Flutter'.animate(
  style: const TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
  duration: const Duration(seconds: 3),
)
.fade(duration: const Duration(milliseconds: 400))
.scale(duration: const Duration(milliseconds: 500))
.then(delay: const Duration(milliseconds: 150))
.slide(direction: SlideDirection.bottomToTop)
.shimmer(advanceCursor: false);

Use advanceCursor: false when you want effects to overlap on the same portion of the timeline. You can also convert any existing MultiAnimatedText into the fluent API with .compose().

---

📄 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:

1. Clone the repository:

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

2. Install dependencies:

flutter pub get

3. 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

Copyright (©️) 2025 Thant Zin