flutter_drag_drop #

Advanced drag and drop with custom drop zones, previews, and animations for Flutter applications.

Features #

✨ Advanced Drag & Drop - Powerful and flexible drag and drop system
🎯 Custom Drop Zones - Define custom drop areas with validation
👁️ Custom Previews - Beautiful drag previews during operations
🎬 Smooth Animations - Fluid animations and transitions
🌐 Cross-Platform - Supports iOS, Android, Web, Windows, macOS, Linux
⚡ WASM Compatible - Optimized for web performance
🚀 High Performance - Optimized for smooth interactions

Platform Support #

Getting Started #

Installation #

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

dependencies:
  flutter_drag_drop: ^0.0.1

Basic Usage #

import 'package:flutter_drag_drop/flutter_drag_drop.dart';

class DragDropExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DragDropArea(
      onDrop: (DragDropData data) {
        // Handle dropped data
        print('Dropped: ${data.content}');
      },
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          border: Border.all(color: Colors.blue),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Center(
          child: Text('Drop Zone'),
        ),
      ),
    );
  }
}

Advanced Usage with Custom Preview #

class AdvancedDragDropExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Draggable item with custom preview
        DraggableWidget(
          data: 'Custom Data',
          previewBuilder: (context, details) => Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.blue.withOpacity(0.8),
              borderRadius: BorderRadius.circular(8),
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 8,
                  offset: Offset(0, 4),
                ),
              ],
            ),
            child: Text(
              'Custom Preview',
              style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
            ),
          ),
          child: Container(
            padding: EdgeInsets.all(16),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(8),
            ),
            child: Text(
              'Drag Me',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        
        SizedBox(height: 32),
        
        // Custom drop zone with validation
        DragDropArea(
          onDrop: (DragDropData data) {
            // Validate and handle drop
            if (data.content is String) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Dropped: ${data.content}')),
              );
            }
          },
          onDragEnter: (data) {
            // Visual feedback when dragging over
            return DragDropFeedback(
              highlightColor: Colors.green.withOpacity(0.3),
              scale: 1.05,
            );
          },
          onDragLeave: (data) {
            // Reset visual state
            return DragDropFeedback(
              highlightColor: Colors.transparent,
              scale: 1.0,
            );
          },
          child: Container(
            width: 300,
            height: 150,
            decoration: BoxDecoration(
              border: Border.all(color: Colors.green, width: 2),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Icon(Icons.cloud_download, size: 48, color: Colors.green),
                  SizedBox(height: 8),
                  Text(
                    'Advanced Drop Zone',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  Text('Drag items here to drop'),
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}

API Reference #

Core Classes #

• DragDropArea - Main drop zone widget
• DraggableWidget - Widget that can be dragged
• DragDropData - Data structure for drag and drop operations
• DragDropFeedback - Visual feedback configuration

Key Methods #

• onDrop - Called when an item is dropped
• onDragEnter - Called when dragging enters the drop zone
• onDragLeave - Called when dragging leaves the drop zone
• previewBuilder - Custom preview during drag operations

Configuration #

Animation Settings #

DragDropArea(
  animationDuration: Duration(milliseconds: 300),
  animationCurve: Curves.easeInOut,
  // ... other properties
)

Validation #

DragDropArea(
  validator: (DragDropData data) {
    // Return true if drop is allowed
    return data.content is String && data.content.length > 0;
  },
  onDrop: (data) {
    // Only called if validation passes
  },
)

Performance Optimization #

• Lazy Loading - Drop zones only activate when needed
• Efficient Rendering - Minimal rebuilds during drag operations
• Memory Management - Proper cleanup of resources
• WASM Support - Optimized web performance

Testing #

Run the test suite to ensure everything works correctly:

flutter test

Contributing #

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License #

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

Support #

• 📧 Email: [your-email@example.com]
• 🐛 Issues: GitHub Issues
• 📖 Documentation: API Reference

Made with ❤️ by Dhia Bechattaoui