Custom Animate Button #

A beautiful, customizable sliding button widget with completion animation for Flutter.

Features #

• 🎚️ Smooth sliding animation
• 🎨 Customizable colors and sizes
• 🔔 Completion callback
• 🌈 Gradient color effects during drag
• ⚙️ Configurable completion threshold
• 🔒 Persistent drag icon

Installation #

Add to your pubspec.yaml:

dependencies:
  custom_animate_btn: ^1.0.0


1. **Full Example App** (in example/ folder):
```dart
// example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:customebtn/customebtn.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('CustomAnimateBtn Demo')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CustomAnimateBtn(
                title: "Slide to Unlock",
                completedText: "Unlocked!",
                onCompleted: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text("Action completed!"))
                  );
                },
                width: 300,
                height: 60,
                icon: const Icon(Icons.lock_open, color: Colors.white),
              ),
              const SizedBox(height: 20),
              CustomAnimateBtn(
                title: "Slide to Confirm",
                completedText: "Confirmed!",
                onCompleted: () {},
                slidingColor: Colors.purple,
                backgroundColor: Colors.grey[200]!,
              ),
            ],
          ),
        ),
      ),
    );
  }
}


## Parameters

```dart
CustomAnimateBtn(
  title: "Slide to Pay",
  completedText: "Payment Sent!",
  onCompleted: _processPayment,
  width: 320,
  height: 70,
  backgroundColor: Colors.grey[100]!,
  slidingColor: Colors.green,
  completedColor: Colors.green[700]!,
  icon: const Icon(Icons.attach_money, size: 28),
  gradientColors: [Colors.green, Colors.greenAccent],
  completeThreshold: 0.9, // Requires 90% drag
  animationDuration: const Duration(milliseconds: 500),
)



## Contact 
GitHub: https://github.com/DilakshaDissanayake