Zeba Academy Scale #

A lightweight and flexible Flutter package for creating smooth scale animations, pulse animations, and hover scale effects with minimal code.

Build interactive and engaging Flutter interfaces with reusable animation widgets designed for buttons, cards, icons, badges, product tiles, dashboards, and more.

✨ Features #

• 🎯 Simple scale animations
• 💓 Continuous pulse animations
• 🖱️ Hover scale effects for web and desktop
• 🎮 Programmatic animation control
• ⚡ Lightweight and dependency-free
• 🎨 Custom animation duration
• 🌊 Custom animation curves
• 📱 Works across Flutter-supported platforms
• 🧩 Reusable animation widgets
• 🔧 Enable or disable animations when needed
• 🧪 Tested with Flutter widget tests
• 📦 No external dependencies

📦 Installation #

Add zeba_academy_scale to your pubspec.yaml:

dependencies:
  zeba_academy_scale: ^0.0.1

Then run:

flutter pub get

🚀 Getting Started #

Import the package:

import 'package:zeba_academy_scale/zeba_academy_scale.dart';

🎯 ZebaScale #

ZebaScale creates a smooth scale effect when a user presses a widget.

It is perfect for:

• Buttons
• Cards
• Icons
• Product items
• Interactive containers
• Custom clickable widgets

Basic Usage #

ZebaScale(
  child: Container(
    padding: const EdgeInsets.all(20),
    color: Colors.blue,
    child: const Text(
      'Tap Me',
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
)

🎨 Scale Animation with onTap #

ZebaScale(
  onTap: () {
    debugPrint('Widget tapped');
  },
  child: Container(
    padding: const EdgeInsets.symmetric(
      horizontal: 24,
      vertical: 16,
    ),
    decoration: BoxDecoration(
      color: Colors.deepPurple,
      borderRadius: BorderRadius.circular(12),
    ),
    child: const Text(
      'Tap Me',
      style: TextStyle(
        color: Colors.white,
        fontSize: 18,
      ),
    ),
  ),
)

⚙️ Customize Scale Values #

ZebaScale(
  scale: 1.0,
  pressedScale: 0.90,
  duration: const Duration(
    milliseconds: 200,
  ),
  curve: Curves.easeOut,
  child: const Icon(
    Icons.favorite,
    size: 50,
  ),
)

Available Properties #

🎮 Programmatic Scale Control #

Use ZebaScaleController to control the animation from outside the widget.

Create a Controller #

final controller = ZebaScaleController();

Use it with ZebaScale:

ZebaScale(
  controller: controller,
  child: const Text(
    'Controlled Widget',
  ),
)

Control the animation:

controller.scaleUp();

controller.scaleDown();

controller.toggle();

Complete Controller Example #

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

  @override
  State<ScaleExample> createState() => _ScaleExampleState();
}

class _ScaleExampleState extends State<ScaleExample> {
  final controller = ZebaScaleController();

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ZebaScale(
          controller: controller,
          child: Container(
            padding: const EdgeInsets.all(24),
            color: Colors.blue,
            child: const Text(
              'Controlled Widget',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
        const SizedBox(height: 16),
        ElevatedButton(
          onPressed: controller.scaleDown,
          child: const Text('Scale Down'),
        ),
        ElevatedButton(
          onPressed: controller.scaleUp,
          child: const Text('Scale Up'),
        ),
        ElevatedButton(
          onPressed: controller.toggle,
          child: const Text('Toggle'),
        ),
      ],
    );
  }
}

💓 ZebaPulse #

ZebaPulse creates a continuous pulsing animation.

It is perfect for:

• Notifications
• Attention indicators
• Live status indicators
• Favorite buttons
• Loading indicators
• Promotional elements

Basic Usage #

ZebaPulse(
  child: Container(
    width: 80,
    height: 80,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: Colors.red,
    ),
    child: const Icon(
      Icons.favorite,
      color: Colors.white,
    ),
  ),
)

🎨 Customize Pulse Animation #

ZebaPulse(
  minScale: 0.90,
  maxScale: 1.10,
  duration: const Duration(
    milliseconds: 800,
  ),
  curve: Curves.easeInOut,
  child: const Icon(
    Icons.notifications,
    size: 50,
  ),
)

🔁 Single Pulse Animation #

ZebaPulse(
  repeat: false,
  child: const Icon(
    Icons.star,
  ),
)

⏯️ Control Animation Start #

ZebaPulse(
  autoStart: false,
  child: const Icon(
    Icons.favorite,
  ),
)

Available Properties #

🖱️ ZebaHoverScale #

ZebaHoverScale creates a smooth scale effect when the mouse pointer enters a widget.

It is ideal for:

• Flutter Web
• Windows applications
• macOS applications
• Desktop dashboards
• Cards
• Navigation items
• Product cards

Basic Usage #

ZebaHoverScale(
  child: Card(
    child: Padding(
      padding: const EdgeInsets.all(24),
      child: const Text(
        'Hover Over Me',
      ),
    ),
  ),
)

🎨 Customize Hover Scale #

ZebaHoverScale(
  scale: 1.10,
  duration: const Duration(
    milliseconds: 250,
  ),
  curve: Curves.easeOut,
  child: Container(
    padding: const EdgeInsets.all(24),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(16),
      color: Colors.blue,
    ),
    child: const Text(
      'Hover Me',
      style: TextStyle(
        color: Colors.white,
      ),
    ),
  ),
)

🖱️ Detect Hover State #

ZebaHoverScale(
  onHoverChanged: (isHovered) {
    debugPrint(
      'Hovered: $isHovered',
    );
  },
  child: const Text(
    'Hover Me',
  ),
)

🧩 Disable Animations #

You can disable animations whenever required.

Disable Scale Animation #

ZebaScale(
  enabled: false,
  child: const Text(
    'Animation Disabled',
  ),
)

Disable Hover Animation #

ZebaHoverScale(
  enabled: false,
  child: const Text(
    'Hover Disabled',
  ),
)

🎨 Combining Animations #

You can combine multiple widgets to create more interactive experiences.

ZebaHoverScale(
  scale: 1.08,
  child: ZebaPulse(
    minScale: 0.98,
    maxScale: 1.02,
    child: ZebaScale(
      child: Container(
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          color: Colors.deepPurple,
        ),
        child: const Text(
          'Interactive Widget',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ),
)

📱 Platform Support #

🧪 Testing #

Run the package tests:

flutter test

Analyze the package:

flutter analyze

Check the package before publishing:

flutter pub publish --dry-run

📁 Package Structure #

lib/
├── zeba_academy_scale.dart
└── src/
    ├── controllers/
    │   └── scale_controller.dart
    └── widgets/
        ├── zeba_hover_scale.dart
        ├── zeba_pulse.dart
        └── zeba_scale.dart

🌟 Why Zeba Academy Scale? #

zeba_academy_scale is designed to make interactive animations simple and reusable.

Instead of writing animation controllers repeatedly, you can use ready-to-use widgets:

ZebaScale()

ZebaPulse()

ZebaHoverScale()

Create engaging Flutter interfaces with minimal code.

🤝 Contributing #

Contributions are welcome!

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. Submit a pull request.

📄 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 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, technology, and development at 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 channel for more tutorials: zeba.academy

➡ Follow us on Instagram: zeba.academy

Thank you for visiting! 💜

Made with ❤️ by Zeba Academy.