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 #

🎬 Animation Types #

🚀 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 #

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