flutter_drag_drop 0.0.1 copy "flutter_drag_drop: ^0.0.1" to clipboard
flutter_drag_drop: ^0.0.1 copied to clipboard

Advanced drag and drop with custom drop zones, previews, and animations

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_drag_drop/flutter_drag_drop.dart';

void main() {
  runApp(const DragDropExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Drag & Drop Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const DragDropExamplePage(),
    );
  }
}

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

  @override
  State<DragDropExamplePage> createState() => _DragDropExamplePageState();
}

class _DragDropExamplePageState extends State<DragDropExamplePage> {
  final List<String> _droppedItems = [];
  final DragDropController _controller = DragDropController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Drag & Drop Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Core Classes Demo:',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            const SizedBox(height: 16),
            _buildCoreClassesDemo(),
            const SizedBox(height: 32),
            Text(
              'Controller State:',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            const SizedBox(height: 16),
            _buildControllerStateDemo(),
            const SizedBox(height: 16),
            Text(
              'Dropped Items:',
              style: Theme.of(context).textTheme.headlineSmall,
            ),
            const SizedBox(height: 8),
            Expanded(
              child: _buildDroppedItemsList(),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildCoreClassesDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('DragDropData Example:',
            style: Theme.of(context).textTheme.titleMedium),
        const SizedBox(height: 8),
        Text('Content: ${DragDropData(content: "Sample Data").content}'),
        Text('Metadata: ${DragDropData(content: "Data", metadata: {
              "key": "value"
            }).metadata}'),
        const SizedBox(height: 16),
        Text('DragDropFeedback Example:',
            style: Theme.of(context).textTheme.titleMedium),
        const SizedBox(height: 8),
        Text('Enter Scale: ${DragDropFeedback.enter.scale}'),
        Text('Valid Border Width: ${DragDropFeedback.valid.borderWidth}'),
        Text('Invalid Scale: ${DragDropFeedback.invalid.scale}'),
      ],
    );
  }

  Widget _buildControllerStateDemo() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('Is Dragging: ${_controller.isDragging}'),
        Text('Current Data: ${_controller.currentDragData?.content ?? "None"}'),
        Text('Source ID: ${_controller.sourceId ?? "None"}'),
        const SizedBox(height: 16),
        Row(
          children: [
            ElevatedButton(
              onPressed: () {
                final data = DragDropData(
                    content:
                        'Test Item ${DateTime.now().millisecondsSinceEpoch}');
                _controller.startDrag(data, sourceId: 'demo_source');
                setState(() {});
              },
              child: const Text('Start Drag'),
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: () {
                _controller.endDrag();
                setState(() {});
              },
              child: const Text('End Drag'),
            ),
          ],
        ),
      ],
    );
  }

  Widget _buildDroppedItemsList() {
    if (_droppedItems.isEmpty) {
      return Center(
        child: Text(
          'No items dropped yet',
          style: Theme.of(context).textTheme.bodyLarge?.copyWith(
                color: Colors.grey,
                fontStyle: FontStyle.italic,
              ),
        ),
      );
    }

    return ListView.builder(
      itemCount: _droppedItems.length,
      itemBuilder: (context, index) {
        final item = _droppedItems[index];
        return Card(
          margin: const EdgeInsets.symmetric(vertical: 4),
          child: ListTile(
            leading: const Icon(Icons.check_circle, color: Colors.green),
            title: Text(item),
            trailing: IconButton(
              icon: const Icon(Icons.delete, color: Colors.red),
              onPressed: () {
                setState(() {
                  _droppedItems.removeAt(index);
                });
              },
            ),
          ),
        );
      },
    );
  }
}
3
likes
160
points
36
downloads

Publisher

verified publisherbechattaoui.dev

Weekly Downloads

Advanced drag and drop with custom drop zones, previews, and animations

Repository (GitHub)
View/report issues

Documentation

Documentation
API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on flutter_drag_drop