animated_button_glow_effect 1.0.1 
animated_button_glow_effect: ^1.0.1 copied to clipboard
A beautiful and customizable Flutter package for creating animated buttons with stunning glow effects, perfect for modern applications across all platforms.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:animated_button_glow_effect/animated_button.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Animated Button Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: const MyHomePage(title: 'Animated Button Demo'),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _message = 'Tap any button to see the animation!';
void _updateMessage(String newMessage) {
setState(() {
_message = newMessage;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
appBar: AppBar(
title: Text(widget.title),
backgroundColor: Colors.grey[800],
elevation: 0,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
// Status message
Container(
width: double.infinity,
padding: const EdgeInsets.all(16.0),
margin: const EdgeInsets.only(bottom: 30.0),
decoration: BoxDecoration(
color: Colors.grey[800],
borderRadius: BorderRadius.circular(12.0),
),
child: Text(
_message,
textAlign: TextAlign.center,
style: const TextStyle(
color: Colors.white,
fontSize: 16.0,
fontWeight: FontWeight.w500,
),
),
),
// Section: Circular Buttons (like the image)
_buildSection(
'Circular Buttons (Like Your Image)',
[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
AnimatedButton.circular(
child: const Icon(
Icons.arrow_forward,
color: Colors.white,
size: 24,
),
onPressed: () =>
_updateMessage('Green circular button pressed!'),
color: Colors.green,
size: 60.0,
glowIntensity: 0.8,
),
AnimatedButton.circular(
child: const Icon(
Icons.play_arrow,
color: Colors.white,
size: 28,
),
onPressed: () =>
_updateMessage('Blue circular button pressed!'),
color: Colors.blue,
size: 70.0,
glowIntensity: 0.9,
),
AnimatedButton.circular(
child: const Icon(
Icons.favorite,
color: Colors.white,
size: 22,
),
onPressed: () =>
_updateMessage('Red circular button pressed!'),
color: Colors.red,
size: 55.0,
glowIntensity: 0.7,
),
],
),
],
),
const SizedBox(height: 30),
// Section: Different Animation Types
_buildSection(
'Different Animation Types',
[
_buildButtonRow([
AnimatedButton(
child: const Text(
'Glow',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () =>
_updateMessage('Glow animation button pressed!'),
color: Colors.purple,
animationType: ButtonAnimationType.glow,
width: 100,
height: 45,
borderRadius: 22.5,
),
AnimatedButton(
child: const Text(
'Scale',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () =>
_updateMessage('Glow with scale button pressed!'),
color: Colors.orange,
animationType: ButtonAnimationType.glowWithScale,
width: 100,
height: 45,
borderRadius: 22.5,
),
]),
const SizedBox(height: 15),
_buildButtonRow([
AnimatedButton(
child: const Text(
'Ripple',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () =>
_updateMessage('Ripple glow button pressed!'),
color: Colors.teal,
animationType: ButtonAnimationType.rippleGlow,
width: 100,
height: 45,
borderRadius: 22.5,
),
AnimatedButton(
child: const Text(
'Breathing',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () =>
_updateMessage('Breathing glow button pressed!'),
color: Colors.indigo,
animationType: ButtonAnimationType.breathingGlow,
width: 100,
height: 45,
borderRadius: 22.5,
),
]),
],
),
const SizedBox(height: 30),
// Section: Custom Gradients
_buildSection(
'Custom Gradient Buttons',
[
_buildButtonRow([
AnimatedButton(
child: const Text(
'Gradient 1',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () =>
_updateMessage('Gradient button 1 pressed!'),
gradient: const LinearGradient(
colors: [Colors.pink, Colors.purple],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
color: Colors.pink, // Fallback color for glow
width: 120,
height: 50,
borderRadius: 25,
glowIntensity: 0.8,
),
AnimatedButton(
child: const Text(
'Gradient 2',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
onPressed: () =>
_updateMessage('Gradient button 2 pressed!'),
gradient: const LinearGradient(
colors: [Colors.cyan, Colors.blue],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
color: Colors.cyan, // Fallback color for glow
width: 120,
height: 50,
borderRadius: 25,
glowIntensity: 0.9,
),
]),
],
),
const SizedBox(height: 30),
// Section: Different Sizes
_buildSection(
'Different Sizes',
[
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
AnimatedButton.circular(
child: const Icon(
Icons.star,
color: Colors.white,
size: 16,
),
onPressed: () => _updateMessage('Small button pressed!'),
color: Colors.amber,
size: 40.0,
),
AnimatedButton.circular(
child: const Icon(
Icons.star,
color: Colors.white,
size: 24,
),
onPressed: () => _updateMessage('Medium button pressed!'),
color: Colors.amber,
size: 60.0,
),
AnimatedButton.circular(
child: const Icon(
Icons.star,
color: Colors.white,
size: 32,
),
onPressed: () => _updateMessage('Large button pressed!'),
color: Colors.amber,
size: 80.0,
),
],
),
],
),
const SizedBox(height: 30),
// Section: Rectangular Buttons
_buildSection(
'Rectangular Buttons',
[
AnimatedButton.rectangular(
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.download, color: Colors.white, size: 20),
SizedBox(width: 8),
Text(
'Download',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
],
),
onPressed: () => _updateMessage('Download button pressed!'),
color: Colors.green,
width: 140,
height: 50,
borderRadius: 12,
),
const SizedBox(height: 15),
AnimatedButton.rectangular(
child: const Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.share, color: Colors.white, size: 20),
SizedBox(width: 8),
Text(
'Share',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
],
),
onPressed: () => _updateMessage('Share button pressed!'),
color: Colors.deepOrange,
width: 120,
height: 50,
borderRadius: 12,
),
],
),
const SizedBox(height: 30),
// Section: Disabled Button
_buildSection(
'Disabled Button',
[
AnimatedButton.circular(
child: const Icon(
Icons.lock,
color: Colors.white54,
size: 24,
),
onPressed: null,
color: Colors.grey,
size: 60.0,
enabled: false,
),
],
),
const SizedBox(height: 50),
],
),
),
);
}
Widget _buildSection(String title, List<Widget> children) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 15),
...children,
],
);
}
Widget _buildButtonRow(List<Widget> buttons) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: buttons,
);
}
}Metadata
1
likes
155
points
128
downloads
Publisher
unverified uploader
Weekly Downloads
Metadata
A beautiful and customizable Flutter package for creating animated buttons with stunning glow effects, perfect for modern applications across all platforms.
Repository (GitHub)
View/report issues
Topics
#animation #button #glow #widget #cross-platform
Documentation
License
MIT (license)
