animated_buttons_flutter 1.0.0

Animated Buttons for Flutter is a comprehensive collection of highly customizable, performant buttons with modern visual effects. Built for developers needing eye-catching interactions, this package offers

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:animated_buttons/animated_button.dart';

void main() => runApp(const AnimatedButtonsDemo());

class AnimatedButtonsDemo extends StatelessWidget {
  const AnimatedButtonsDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Buttons Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const ButtonShowcaseScreen(),
    );
  }
}

class ButtonShowcaseScreen extends StatefulWidget {
  const ButtonShowcaseScreen({super.key});

  @override
  State<ButtonShowcaseScreen> createState() => _ButtonShowcaseScreenState();
}

class _ButtonShowcaseScreenState extends State<ButtonShowcaseScreen> {
  int _counter = 0;
  bool _isLoading = false;

  void _simulateLoading() async {
    setState(() => _isLoading = true);
    await Future.delayed(const Duration(seconds: 2));
    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated Buttons Demo'),
        centerTitle: true,
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            _buildExampleCard(
              title: 'Gradient with Shimmer',
              child: AnimatedButton(
                onPressed: () => setState(() => _counter++),
                enableGradient: true,
                baseColor: Colors.purple,
                highlightColor: Colors.deepPurpleAccent,
                borderRadius: BorderRadius.circular(20),
                enableShimmer: true,
                child: Text(
                  'Counter: $_counter',
                  style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                  ),
                ),
              ),
            ),
            _buildExampleCard(
              title: 'Scale Animation',
              child: AnimatedButton(
                onPressed: () {},
                scaleFactor: 0.9,
                borderRadius: BorderRadius.circular(12),
                baseColor: Colors.blueGrey,
                child: const Padding(
                  padding: EdgeInsets.symmetric(vertical: 12),
                  child: Text(
                    'Scale Effect',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
            _buildExampleCard(
              title: 'Disabled State',
              child: AnimatedButton(
                onPressed: () {},
                baseColor: Colors.grey,
                borderRadius: BorderRadius.circular(8),
                child: const Text(
                  'Disabled Button',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            _buildExampleCard(
              title: 'Neon Style Button',
              child: AnimatedButton(
                onPressed: () {},
                enableGradient: true,
                baseColor: Colors.cyan,
                highlightColor: Colors.blueAccent,
                borderRadius: BorderRadius.circular(24),
                enableShimmer: true,
                scaleFactor: 0.95,
                child: const Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Icon(Icons.star, color: Colors.white),
                    SizedBox(width: 8),
                    Text('Neon Button', style: TextStyle(color: Colors.white)),
                  ],
                ),
              ),
            ),
            _buildExampleCard(
              title: 'Loading State',
              child: AnimatedButton(
                onPressed: _simulateLoading,
                baseColor: Colors.green,
                highlightColor: Colors.lightGreen,
                borderRadius: BorderRadius.circular(16),
                child: _isLoading
                    ? const CircularProgressIndicator(color: Colors.white)
                    : const Text(
                        'Start Loading',
                        style: TextStyle(color: Colors.white),
                      ),
              ),
            ),
            _buildExampleCard(
              title: 'Hover Effect',
              child: AnimatedButton(
                onPressed: () {},
                baseColor: Colors.orange,
                animationDuration: const Duration(milliseconds: 300),
                borderRadius: BorderRadius.circular(30),
                child: const Text(
                  'Hover Over Me!',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildExampleCard({required String title, required Widget child}) {
    return Container(
      margin: const EdgeInsets.only(bottom: 20),
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w500,
              color: Colors.black54,
            ),
          ),
          const SizedBox(height: 12),
          child,
        ],
      ),
    );
  }
}