zeba_academy_text_effects 1.0.0

Beautiful animated text effects for Flutter including typewriter, wave, rainbow, and scramble animations.

Zeba Academy Text Effects

A collection of beautiful, customizable, and dependency-free animated text effects for Flutter.

zeba_academy_text_effects provides ready-to-use text animations including:

• Typewriter text
• Wave text
• Rainbow gradient text
• Scramble text

Built with pure Flutter and designed to be simple, lightweight, and easy to integrate into any application.

---

✨ Features

• 🎬 Typewriter text animation
• 🌊 Wave animation for individual characters
• 🌈 Animated rainbow gradient text
• 🔤 Scramble and reveal text animation
• 🔁 Optional looping support
• 🎨 Fully customizable styling
• ⚡ Lightweight and dependency-free
• 🧩 Null safety support
• 📱 Works across Flutter platforms
• 🛠️ Built entirely with Flutter SDK widgets
• 📦 No external runtime dependencies

---

📦 Installation

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_text_effects: ^1.0.0

Then run:

flutter pub get

Import the package:

import 'package:zeba_academy_text_effects/zeba_academy_text_effects.dart';

---

🎬 Typewriter Text

The TypewriterText widget reveals text one character at a time.

Basic Usage

const TypewriterText(
  'Welcome to Zeba Academy',
)

Customized Typewriter

TypewriterText(
  'Building beautiful Flutter apps',
  duration: const Duration(milliseconds: 80),
  cursor: '_',
  showCursor: true,
  style: const TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
)

Looping Typewriter

TypewriterText(
  'This text keeps typing',
  duration: const Duration(milliseconds: 70),
  loop: true,
  loopDelay: const Duration(seconds: 2),
)

Typewriter Callback

TypewriterText(
  'Animation completed',
  onComplete: () {
    debugPrint('Typewriter animation completed');
  },
)

Typewriter Properties

Property	Type	Default	Description
text	String	Required	Text to animate
duration	Duration	70 ms	Delay between characters
startDelay	Duration	Zero	Delay before animation starts
loop	bool	false	Restarts after completion
loopDelay	Duration	1 second	Delay before looping
cursor	String	|	Cursor displayed during animation
showCursor	bool	true	Shows or hides cursor
onComplete	VoidCallback?	null	Completion callback
style	TextStyle?	null	Text styling

---

🌊 Wave Text

WaveText animates individual characters vertically to create a continuous wave effect.

Basic Usage

const WaveText(
  'WAVE TEXT',
)

Customized Wave

WaveText(
  'Flutter Animation',
  amplitude: 12,
  speed: const Duration(milliseconds: 1200),
  spacing: 0.7,
  style: const TextStyle(
    fontSize: 32,
    fontWeight: FontWeight.bold,
  ),
)

Reverse Wave Direction

WaveText(
  'RIGHT TO LEFT',
  direction: WaveDirection.rightToLeft,
)

Wave Properties

Property	Type	Default	Description
text	String	Required	Text to animate
amplitude	double	8	Vertical movement amount
speed	Duration	900 ms	Complete wave cycle duration
spacing	double	0.6	Phase difference between characters
direction	WaveDirection	leftToRight	Wave movement direction
style	TextStyle?	null	Text styling
textAlign	TextAlign?	null	Text alignment

---

🌈 Rainbow Text

RainbowText applies an animated rainbow gradient to text.

Basic Usage

const RainbowText(
  'RAINBOW TEXT',
)

Customized Rainbow

RainbowText(
  'COLORFUL FLUTTER',
  duration: const Duration(seconds: 4),
  style: const TextStyle(
    fontSize: 36,
    fontWeight: FontWeight.bold,
  ),
)

Custom Colors

RainbowText(
  'CUSTOM GRADIENT',
  colors: const [
    Colors.cyan,
    Colors.blue,
    Colors.purple,
  ],
)

Reverse Animation

RainbowText(
  'REVERSE RAINBOW',
  mode: RainbowAnimationMode.reverse,
)

Rainbow Properties

Property	Type	Default	Description
text	String	Required	Text to display
duration	Duration	3 seconds	Animation duration
colors	List<Color>	Rainbow colors	Gradient colors
mode	RainbowAnimationMode	continuous	Animation mode
style	TextStyle?	null	Text styling
textAlign	TextAlign?	null	Text alignment

---

🔤 Scramble Text

ScrambleText displays random characters before progressively revealing the final text.

This effect is useful for:

• Tech interfaces
• Cyberpunk designs
• Loading states
• Gaming interfaces
• Developer portfolios
• Digital dashboards

Basic Usage

const ScrambleText(
  'HELLO WORLD',
)

Customized Scramble Animation

ScrambleText(
  'INITIALIZING SYSTEM',
  duration: const Duration(milliseconds: 50),
  revealDuration: const Duration(seconds: 2),
  style: const TextStyle(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    letterSpacing: 2,
  ),
)

Custom Scramble Characters

ScrambleText(
  'ACCESS GRANTED',
  characters: '01',
)

Looping Scramble Animation

ScrambleText(
  'SYSTEM ONLINE',
  loop: true,
  loopDelay: const Duration(seconds: 2),
)

Scramble Completion Callback

ScrambleText(
  'ANIMATION COMPLETE',
  onComplete: () {
    debugPrint('Scramble animation completed');
  },
)

Scramble Properties

Property	Type	Default	Description
text	String	Required	Final text
duration	Duration	50 ms	Time between scramble frames
revealDuration	Duration	1200 ms	Total reveal duration
characters	String	Alphanumeric	Characters used during scrambling
mode	ScrambleMode	reveal	Scramble behavior
loop	bool	false	Restarts animation
loopDelay	Duration	1 second	Delay before restarting
onComplete	VoidCallback?	null	Completion callback
style	TextStyle?	null	Text styling

---

🧩 Complete Example

import 'package:flutter/material.dart';
import 'package:zeba_academy_text_effects/zeba_academy_text_effects.dart';

class TextEffectsExample extends StatelessWidget {
  const TextEffectsExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Text Effects'),
      ),
      body: ListView(
        padding: const EdgeInsets.all(24),
        children: [
          const TypewriterText(
            'Welcome to Zeba Academy',
            duration: Duration(milliseconds: 80),
          ),

          const SizedBox(height: 40),

          const WaveText(
            'WAVE EFFECT',
            amplitude: 10,
          ),

          const SizedBox(height: 40),

          const RainbowText(
            'RAINBOW EFFECT',
          ),

          const SizedBox(height: 40),

          const ScrambleText(
            'SCRAMBLE EFFECT',
            revealDuration: Duration(seconds: 2),
          ),
        ],
      ),
    );
  }
}

---

🛠️ Supported Platforms

This package is designed for Flutter applications running on:

• ✅ Android
• ✅ iOS
• ✅ Web
• ✅ Windows
• ✅ macOS
• ✅ Linux

---

⚡ Performance

The package is designed with performance in mind:

• Uses Flutter's built-in animation system
• Avoids external dependencies
• Uses AnimationController for continuous effects
• Properly disposes animation controllers and timers
• Supports Flutter's null safety
• Keeps the public API simple and lightweight

For best performance, avoid rendering a very large number of continuously animated text widgets simultaneously.

---

🧪 Testing

Run static analysis:

flutter analyze

Run tests:

flutter test

Validate the package before publishing:

flutter pub publish --dry-run

---

📚 API Overview

Widgets

• TypewriterText
• WaveText
• RainbowText
• ScrambleText

Enums

• WaveDirection
• RainbowAnimationMode
• ScrambleMode

---

🤝 Contributing

Contributions are welcome!

To contribute:

1. Fork the repository.
2. Create a feature branch.
3. Make your changes.
4. Add or update tests.
5. Run:

flutter analyze
flutter test

6. Create a pull request.

Please ensure that your contribution follows the existing code style and maintains compatibility with supported Flutter versions.

---

📄 License

Copyright © 2026 Sufyan bin Uzayr.

This project is licensed under the GNU General Public License v3.0 (GPL-3.0).

You are free to:

• Use the software
• Study the source code
• Modify the software
• Share the software
• Distribute modified versions

Any distributed modified version must also be licensed under the GNU GPL v3.0.

See the LICENSE file for the complete license text.

---

About Me

✨ I’m Sufyan bin Uzayr, an open-source developer passionate about building and sharing meaningful projects.

You can learn more about me and my work at sufyanism.com or connect with me on LinkedIn.

---

Your All-in-One Learning Hub!

🚀 Explore courses and resources in coding, tech, and development at zeba.academy and code.zeba.academy.

Empower yourself with practical skills through curated tutorials, real-world projects, and hands-on experience. Level up your tech game today! 💻✨

Zeba Academy is a learning platform dedicated to coding, technology, and development.

➡️ Visit our main site: zeba.academy

➡️ Explore hands-on courses and resources at: code.zeba.academy

➡️ Check out our YouTube for more tutorials: zeba.academy

➡️ Follow us on Instagram: zeba.academy

---

Thank you for visiting! 💙

If this package helps you build something beautiful, consider giving it a ⭐ on GitHub and sharing it with the Flutter community.