zeba_academy_fade #

A lightweight Flutter animation package for creating smooth fade-in, fade-out, fade-in-out, and sequential fade animations with simple, reusable widgets.

Built with Flutter's built-in animation system and designed to require zero external dependencies.

✨ Features #

• ✅ Fade-in animations
• ✅ Fade-out animations
• ✅ Fade-in and fade-out animations
• ✅ Sequential fade animations
• ✅ Configurable animation duration
• ✅ Custom animation curves
• ✅ Optional animation delays
• ✅ Repeatable fade-in-out animations
• ✅ Optional widget removal after fade-out
• ✅ Completion callbacks
• ✅ Replay support for sequential animations
• ✅ Null-safe
• ✅ Lightweight
• ✅ No external dependencies
• ✅ Easy to integrate into any Flutter application

📦 Installation #

Add the package to your pubspec.yaml:

dependencies:
  zeba_academy_fade: ^0.0.1

Then run:

flutter pub get

🚀 Usage #

Import the package:

import 'package:zeba_academy_fade/zeba_academy_fade.dart';

🌟 Fade In #

Use ZebaFadeIn to smoothly reveal a widget.

ZebaFadeIn(
  duration: const Duration(milliseconds: 800),
  child: const Text(
    'Hello Flutter',
    style: TextStyle(fontSize: 28),
  ),
)

With Delay #

ZebaFadeIn(
  delay: const Duration(milliseconds: 300),
  duration: const Duration(milliseconds: 800),
  child: const Text('Delayed Fade In'),
)

With Completion Callback #

ZebaFadeIn(
  onCompleted: () {
    debugPrint('Fade-in completed');
  },
  child: const Text('Welcome'),
)

🌙 Fade Out #

Use ZebaFadeOut to gradually hide a widget.

ZebaFadeOut(
  duration: const Duration(milliseconds: 800),
  child: const Text('Goodbye'),
)

Remove Widget After Fade Out #

ZebaFadeOut(
  removeOnComplete: true,
  child: const Text('This will disappear'),
)

With Completion Callback #

ZebaFadeOut(
  onCompleted: () {
    debugPrint('Fade-out completed');
  },
  child: const Text('Fading Away'),
)

🔄 Fade In and Fade Out #

Use ZebaFadeInOut to fade a widget into view, keep it visible, and then fade it out.

ZebaFadeInOut(
  fadeInDuration: const Duration(milliseconds: 800),
  visibleDuration: const Duration(seconds: 1),
  fadeOutDuration: const Duration(milliseconds: 800),
  child: const Text(
    'Hello!',
    style: TextStyle(fontSize: 32),
  ),
)

Repeat Animation #

ZebaFadeInOut(
  repeat: true,
  fadeInDuration: const Duration(milliseconds: 600),
  visibleDuration: const Duration(milliseconds: 800),
  fadeOutDuration: const Duration(milliseconds: 600),
  child: const Icon(
    Icons.favorite,
    size: 48,
  ),
)

With Delay #

ZebaFadeInOut(
  delay: const Duration(seconds: 1),
  child: const Text('Starts after one second'),
)

📋 Sequential Fade #

Use ZebaSequentialFade to reveal multiple widgets one after another.

ZebaSequentialFade(
  duration: const Duration(milliseconds: 500),
  delay: const Duration(milliseconds: 150),
  children: [
    const Text('First item'),
    const Text('Second item'),
    const Text('Third item'),
  ],
)

The widgets appear in sequence:

First item
    ↓
Second item
    ↓
Third item

Example with Cards #

ZebaSequentialFade(
  duration: const Duration(milliseconds: 500),
  delay: const Duration(milliseconds: 200),
  children: [
    Card(
      child: ListTile(
        title: const Text('Profile'),
      ),
    ),
    Card(
      child: ListTile(
        title: const Text('Settings'),
      ),
    ),
    Card(
      child: ListTile(
        title: const Text('Notifications'),
      ),
    ),
  ],
)

Completion Callback #

ZebaSequentialFade(
  onCompleted: () {
    debugPrint('All items are visible');
  },
  children: const [
    Text('One'),
    Text('Two'),
    Text('Three'),
  ],
)

🎛️ Custom Curves #

All fade animations support Flutter animation curves.

ZebaFadeIn(
  curve: Curves.easeOutBack,
  child: const Text('Smooth Animation'),
)

Other useful curves include:

Curves.easeIn
Curves.easeOut
Curves.easeInOut
Curves.easeOutBack
Curves.fastOutSlowIn
Curves.decelerate

⚙️ API Reference #

ZebaFadeIn #

ZebaFadeOut #

ZebaFadeInOut #

ZebaSequentialFade #

🧪 Testing #

Run the package tests:

flutter test

Analyze the package:

flutter analyze

Validate the package before publishing:

flutter pub publish --dry-run

📁 Project Structure #

lib/
├── zeba_academy_fade.dart
└── src/
    ├── fade_in.dart
    ├── fade_out.dart
    ├── fade_in_out.dart
    └── sequential_fade.dart

💡 Why Use This Package? #

Flutter provides powerful animation tools, but repeatedly setting up fade animations can create unnecessary boilerplate.

zeba_academy_fade provides reusable widgets for common fade animation patterns:

Fade In
Fade Out
Fade In → Visible → Fade Out
Sequential Fade

This allows you to focus on building your application instead of repeatedly writing animation controllers.

📜 License #

Copyright © 2026 Sufyan bin Uzayr

This project is licensed under the GNU General Public License v3.0.

You may use, modify, and distribute this software under the terms of the GPL-3.0 license.

See the LICENSE file for the full 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, technology, 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: code.zeba.academy

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

➡ Follow us on Instagram: zeba.academy

Thank you for visiting and supporting open source! ❤️