🎨 New Animated Button

A highly customizable, high-performance animated button for Flutter, featuring rich tap and hover effects powered by a custom rendering pipeline.

Built for Flutter Web, Desktop, and Mobile with a strong focus on smooth animations and performance.

---

📸 Preview

---

✨ Features

• 🎈 Advanced tap animations

  • Jelly (physics-inspired deformation)
  • Scale
  • Ripple
  • Bounce
  • Wave

• 🖱️ Hover animations (Web & Desktop)

  • Scale
  • Lift
  • Glow
  • Shimmer

• 🧊 Glassmorphism

  • Optional translucent overlay
  • Highlight and border effects

• 🔺 Custom shapes

  • Rounded rectangle
  • Stadium
  • Circle
  • Polygon
  • Star
  • Fully custom paths

• ⏱️ Long-press support

  • Configurable duration
  • Visual progress indicator

• 🚀 Performance-oriented

  • CustomPainter + Listenable repaint
  • Optimized for Flutter Web
  • No unnecessary rebuilds
  • Pointer move throttling

---

📦 Installation

dependencies:
  new_animated_button: ^

flutter pub get

---

🚀 Quick Start

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

NewAnimatedButton(
  onPressed: () {
    debugPrint('Pressed');
  },
  tapAnimation: TapAnimation.jelly(),
  hoverAnimation: HoverAnimation.scale(),
  child: const Text(
    'Click Me',
    style: TextStyle(color: Colors.white),
  ),
)

---

🎯 Tap Animations

Explore each animation attribute ;)

tapAnimation: TapAnimation.jelly(),
tapAnimation: TapAnimation.scale(),
tapAnimation: TapAnimation.ripple(),
tapAnimation: TapAnimation.bounce(),
tapAnimation: TapAnimation.wave(),

---

🖱️ Hover Animations

Explore each animation attribute ;)

hoverAnimation: HoverAnimation.scale(),
hoverAnimation: HoverAnimation.lift(),
hoverAnimation: HoverAnimation.glow(),
hoverAnimation: HoverAnimation.shimmer(),
hoverAnimation: HoverAnimation.none(),

---

🧩 Combined Animations (Tap + Hover)

You can combine tap and hover animations together:

NewAnimatedButton(
  tapAnimation: TapAnimation.wave(),
  hoverAnimation: HoverAnimation.glow(),
  gradient: const LinearGradient(
  colors: [Color(0xFF3B82F6), Color(0xFF1D4ED8)],
  ),
  child: const Text(
  'Jelly + Lift',
  style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
  ),
)

---

🧊 Glassmorphism

NewAnimatedButton(
  enableGlassmorphism: true,
  child: const Text('Glass'),
)

---

🔺 Custom Shapes

shape: ButtonShape.roundedRectangle(radius: 30);
shape: ButtonShape.stadium();
shape: ButtonShape.circle();
shape: ButtonShape.polygon(sides: 6);
shape: ButtonShape.star(points: 5);

---

⏱️ Long Press

NewAnimatedButton(
  onLongPress: () {},
  longPressDuration: const Duration(milliseconds: 800),
  tapAnimation: TapAnimation.scale(),
  child: const Text('Hold Me'),
)

---

⚡ Performance Notes

• Uses CustomPainter repaint pipeline
• Optimized for Flutter Web
• No frame-jank on animation release

---

Donations

We need your support. Projects like this can not be successful without support from the community. If you find this project useful, and would like to support further development and ongoing maintenance, please consider donating.

Sponsors

Want to become a sponsor? [Become a Sponsor]