flutter_drag_drop 0.0.1
flutter_drag_drop: ^0.0.1 copied to clipboard
Advanced drag and drop with custom drop zones, previews, and animations
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);
});
},
),
),
);
},
);
}
}