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

Property	Description
`child`	Widget displayed inside the animation
`scale`	Normal scale value
`pressedScale`	Scale value while pressed
`duration`	Animation duration
`curve`	Animation curve
`onTap`	Tap callback
`enabled`	Enables or disables animation
`controller`	Optional animation controller

🎮 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

Property	Description
`child`	Widget displayed inside the pulse
`minScale`	Minimum scale
`maxScale`	Maximum scale
`duration`	Animation duration
`curve`	Animation curve
`repeat`	Repeats the animation
`reverse`	Reverses the animation
`autoStart`	Starts automatically

🖱️ 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

Platform	Supported
Android	✅
iOS	✅
Web	✅
Windows	✅
macOS	✅
Linux	✅

🧪 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!

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

flutter analyze

flutter test

Submit a pull request.

📄 License

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.

Zeba Academy Scale

✨ Features

📦 Installation

🚀 Getting Started

🎯 ZebaScale

Basic Usage

🎨 Scale Animation with `onTap`

⚙️ Customize Scale Values

Available Properties

🎮 Programmatic Scale Control

Create a Controller

Complete Controller Example

💓 ZebaPulse

Basic Usage

🎨 Customize Pulse Animation

🔁 Single Pulse Animation

⏯️ Control Animation Start

Available Properties

🖱️ ZebaHoverScale

Basic Usage

🎨 Customize Hover Scale

🖱️ Detect Hover State

🧩 Disable Animations

Disable Scale Animation

Disable Hover Animation

🎨 Combining Animations

📱 Platform Support

🧪 Testing

📁 Package Structure

🌟 Why Zeba Academy Scale?

🤝 Contributing

📄 License

About Me

Your All-in-One Learning Hub!

Libraries

zeba_academy_scale package

Zeba Academy Scale

✨ Features

📦 Installation

🚀 Getting Started

🎯 ZebaScale

Basic Usage

🎨 Scale Animation with onTap

⚙️ Customize Scale Values

Available Properties

🎮 Programmatic Scale Control

Create a Controller

Complete Controller Example

💓 ZebaPulse

Basic Usage

🎨 Customize Pulse Animation

🔁 Single Pulse Animation

⏯️ Control Animation Start

Available Properties

🖱️ ZebaHoverScale

Basic Usage

🎨 Customize Hover Scale

🖱️ Detect Hover State

🧩 Disable Animations

Disable Scale Animation

Disable Hover Animation

🎨 Combining Animations

📱 Platform Support

🧪 Testing

📁 Package Structure

🌟 Why Zeba Academy Scale?

🤝 Contributing

📄 License

About Me

Your All-in-One Learning Hub!

Libraries

zeba_academy_scale package

🎨 Scale Animation with `onTap`