Animated Button Glow Effect Package 🚀

A beautiful and customizable Flutter package for creating animated buttons with stunning glow effects, perfect for modern applications across all platforms.

✨ Features

• 🎨 Multiple Animation Types: Glow, Scale, Ripple, and Breathing animations
• 🌈 Customizable Colors: Set button colors, glow colors, and gradients
• 📏 Flexible Sizing: Support for circular and rectangular buttons with custom dimensions
• ⚡ Smooth Animations: Highly optimized animations with customizable duration
• 🎯 Easy Integration: Simple API with sensible defaults
• 🔧 Highly Customizable: Control every aspect of the button appearance and behavior
• 📱 Full Cross Platform: Works on iOS, Android, Windows, macOS, Linux, and Web

🌐 Platform Support

Platform	Status	Notes
📱 Android	✅ Full Support	All features available
🍎 iOS	✅ Full Support	All features available
🖥️ Windows	✅ Full Support	All features available
🐧 Linux	✅ Full Support	All features available
💻 macOS	✅ Full Support	All features available
🌐 Web	✅ Full Support	All features available

🎬 Animation Types

Type	Description	Best For
glow	Simple pulsing glow effect	General purpose buttons
glowWithScale	Glow combined with scale animation	Call-to-action buttons
rippleGlow	Ripple effect with expanding glow	Interactive elements
breathingGlow	Gentle breathing-like animation	Ambient/background buttons

🚀 Getting Started

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  animated_button_glow_effect: ^1.0.0

Import

import 'package:animated_button_glow_effect/animated_button.dart';

📖 Usage

Basic Circular Button (Like Your Image)

AnimatedButton.circular(
  child: Icon(
    Icons.arrow_forward,
    color: Colors.white,
    size: 24,
  ),
  onPressed: () {
    print('Button pressed!');
  },
  color: Colors.green,
  size: 60.0,
  glowIntensity: 0.8,
)

Custom Animated Button

AnimatedButton(
  child: Text(
    'Tap Me!',
    style: TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
    ),
  ),
  onPressed: () {
    // Handle button press
  },
  color: Colors.blue,
  animationType: ButtonAnimationType.glowWithScale,
  width: 120,
  height: 50,
  borderRadius: 25,
  glowIntensity: 0.7,
  animationDuration: Duration(milliseconds: 1200),
)

Rectangular Button with Gradient

AnimatedButton.rectangular(
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.download, color: Colors.white),
      SizedBox(width: 8),
      Text('Download', style: TextStyle(color: Colors.white)),
    ],
  ),
  onPressed: () {
    // Handle download
  },
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  width: 140,
  height: 50,
)

🎛️ Customization Options

AnimatedButton Properties

Property	Type	Default	Description
child	Widget	required	Widget to display inside the button
onPressed	VoidCallback?	required	Callback when button is pressed
color	Color	Colors.green	Primary button color
glowColor	Color?	null	Custom glow color (defaults to button color)
width	double?	null	Button width (uses size if null)
height	double?	null	Button height (uses size if null)
size	double	60.0	Button size for circular buttons
glowIntensity	double	0.6	Glow effect intensity (0.0 to 1.0)
animationDuration	Duration?	null	Custom animation duration
animationType	ButtonAnimationType	glow	Type of animation effect
repeatAnimation	bool	true	Whether to repeat the animation
borderRadius	double	30.0	Border radius of the button
enableScaleAnimation	bool	true	Enable scale effect on press
elevation	double	4.0	Button shadow elevation
gradient	Gradient?	null	Custom gradient background
enabled	bool	true	Whether the button is enabled
padding	EdgeInsetsGeometry?	null	Internal padding
margin	EdgeInsetsGeometry?	null	External margin

Factory Constructors

AnimatedButton.circular()

Perfect for creating circular buttons like in your image:

• Automatically sets circular shape
• Uses breathingGlow animation by default
• Optimized for icon buttons

AnimatedButton.rectangular()

Ideal for rectangular buttons:

• Uses glowWithScale animation by default
• Perfect for text and icon combinations
• Customizable width and height

🎨 Examples

Different Animation Types

// Simple glow
AnimatedButton(
  child: Text('Glow'),
  onPressed: () {},
  animationType: ButtonAnimationType.glow,
)

// Glow with scale
AnimatedButton(
  child: Text('Scale'),
  onPressed: () {},
  animationType: ButtonAnimationType.glowWithScale,
)

// Ripple effect
AnimatedButton(
  child: Text('Ripple'),
  onPressed: () {},
  animationType: ButtonAnimationType.rippleGlow,
)

// Breathing effect
AnimatedButton(
  child: Text('Breathing'),
  onPressed: () {},
  animationType: ButtonAnimationType.breathingGlow,
)

Custom Colors and Glow

AnimatedButton.circular(
  child: Icon(Icons.favorite, color: Colors.white),
  onPressed: () {},
  color: Colors.red,
  glowColor: Colors.pink,
  glowIntensity: 0.9,
  size: 70.0,
)

Disabled Button

AnimatedButton.circular(
  child: Icon(Icons.lock, color: Colors.white54),
  onPressed: null, // Set to null to disable
  color: Colors.grey,
  enabled: false,
)

🎯 Best Practices

1. Glow Intensity: Keep between 0.5-0.8 for optimal visual appeal
2. Animation Duration: 1000-2000ms works well for most use cases
3. Button Size: Minimum 44x44 points for touch accessibility
4. Color Contrast: Ensure sufficient contrast for accessibility
5. Performance: Use repeatAnimation: false for better performance if continuous animation isn't needed

🔧 Advanced Usage

Custom Animation Control

class CustomButtonWidget extends StatefulWidget {
  @override
  _CustomButtonWidgetState createState() => _CustomButtonWidgetState();
}

class _CustomButtonWidgetState extends State<CustomButtonWidget> {
  bool _isAnimating = true;

  @override
  Widget build(BuildContext context) {
    return AnimatedButton(
      child: Text('Toggle Animation'),
      onPressed: () {
        setState(() {
          _isAnimating = !_isAnimating;
        });
      },
      repeatAnimation: _isAnimating,
      color: Colors.blue,
    );
  }
}

Responsive Button Sizes

Widget buildResponsiveButton(BuildContext context) {
  final screenWidth = MediaQuery.of(context).size.width;
  final buttonSize = screenWidth > 600 ? 80.0 : 60.0;
  
  return AnimatedButton.circular(
    child: Icon(Icons.play_arrow, color: Colors.white),
    onPressed: () {},
    size: buttonSize,
    color: Colors.green,
  );
}

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

If you like this package, please give it a ⭐ on GitHub!

For issues and feature requests, please use the GitHub Issues page.

---

Made with ❤️ for the Flutter community