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:

Fork the repository.
Create a feature branch.
Make your changes.
Add or update tests.
Run:

flutter analyze
flutter test

Create a pull request.

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

📄 License

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.

Zeba Academy Text Effects

✨ Features

📦 Installation

🎬 Typewriter Text

Basic Usage

Customized Typewriter

Looping Typewriter

Typewriter Callback

Typewriter Properties

🌊 Wave Text

Basic Usage

Customized Wave

Reverse Wave Direction

Wave Properties

🌈 Rainbow Text

Basic Usage

Customized Rainbow

Custom Colors

Reverse Animation

Rainbow Properties

🔤 Scramble Text

Basic Usage

Customized Scramble Animation

Custom Scramble Characters

Looping Scramble Animation

Scramble Completion Callback

Scramble Properties

🧩 Complete Example

🛠️ Supported Platforms

⚡ Performance

🧪 Testing

📚 API Overview

Widgets

Enums

🤝 Contributing

📄 License

About Me

Your All-in-One Learning Hub!

Libraries

zeba_academy_text_effects package