How to Create a Drag-and-Drop Interface in FlutterFlow

1// Custom Widget: SortableTaskList
2import 'package:flutter/material.dart';
3
4class SortableTaskList extends StatefulWidget {
5  const SortableTaskList({
6    super.key,
7    required this.tasks,
8    required this.onReorderComplete,
9  });
10
11  final List<dynamic> tasks;
12  final Future<dynamic> Function(List<dynamic>) onReorderComplete;
13
14  @override
15  State<SortableTaskList> createState() => _SortableTaskListState();
16}
17
18class _SortableTaskListState extends State<SortableTaskList> {
19  late List<dynamic> _items;
20
21  @override
22  void initState() {
23    super.initState();
24    _items = List.from(widget.tasks);
25  }
26
27  void _onReorder(int oldIndex, int newIndex) {
28    setState(() {
29      if (newIndex > oldIndex) newIndex--;
30      final item = _items.removeAt(oldIndex);
31      _items.insert(newIndex, item);
32    });
33    // Only write to Firestore AFTER reorder is complete
34    widget.onReorderComplete(_items);
35  }
36
37  @override
38  Widget build(BuildContext context) {
39    return ReorderableListView(
40      onReorder: _onReorder,
41      children: [
42        for (int i = 0; i < _items.length; i++)
43          ListTile(
44            key: ValueKey(_items[i]['id']),
45            title: Text(_items[i]['title'] ?? ''),
46            trailing: const Icon(Icons.drag_handle),
47          ),
48      ],
49    );
50  }
51}

1// functions/index.js
2exports.updateTaskOrder = functions.https.onCall(async (data, context) => {
3  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
4
5  const { taskIds } = data; // array of Firestore doc IDs in new order
6  if (!Array.isArray(taskIds) || taskIds.length === 0) {
7    throw new functions.https.HttpsError('invalid-argument', 'taskIds must be a non-empty array');
8  }
9
10  const db = admin.firestore();
11  const batch = db.batch();
12
13  taskIds.forEach((id, index) => {
14    const ref = db.collection('tasks').doc(id);
15    batch.update(ref, { sortOrder: index });
16  });
17
18  await batch.commit();
19  return { success: true };
20});

1// Custom Widget: KanbanBoard (simplified single-column DragTarget)
2import 'package:flutter/material.dart';
3
4class KanbanColumn extends StatefulWidget {
5  const KanbanColumn({
6    super.key,
7    required this.status,
8    required this.tasks,
9    required this.onTaskMoved,
10  });
11
12  final String status;
13  final List<dynamic> tasks;
14  final void Function(String taskId, String newStatus) onTaskMoved;
15
16  @override
17  State<KanbanColumn> createState() => _KanbanColumnState();
18}
19
20class _KanbanColumnState extends State<KanbanColumn> {
21  bool _isDragOver = false;
22
23  @override
24  Widget build(BuildContext context) {
25    return DragTarget<String>(
26      onWillAcceptWithDetails: (details) => true,
27      onAcceptWithDetails: (details) {
28        setState(() => _isDragOver = false);
29        widget.onTaskMoved(details.data, widget.status);
30      },
31      onMove: (_) => setState(() => _isDragOver = true),
32      onLeave: (_) => setState(() => _isDragOver = false),
33      builder: (context, candidateData, rejectedData) {
34        return AnimatedContainer(
35          duration: const Duration(milliseconds: 150),
36          color: _isDragOver
37              ? Colors.blue.withOpacity(0.15)
38              : Colors.grey.withOpacity(0.05),
39          padding: const EdgeInsets.all(8),
40          child: Column(
41            children: [
42              Text(widget.status, style: const TextStyle(fontWeight: FontWeight.bold)),
43              ...widget.tasks.map((task) => Draggable<String>(
44                data: task['id'] as String,
45                feedback: Material(
46                  elevation: 8,
47                  child: Container(
48                    padding: const EdgeInsets.all(12),
49                    width: 200,
50                    color: Colors.white,
51                    child: Text(task['title'] ?? ''),
52                  ),
53                ),
54                childWhenDragging: Opacity(
55                  opacity: 0.4,
56                  child: _TaskCard(task: task),
57                ),
58                child: _TaskCard(task: task),
59              )),
60            ],
61          ),
62        );
63      },
64    );
65  }
66}
67
68class _TaskCard extends StatelessWidget {
69  const _TaskCard({required this.task});
70  final dynamic task;
71
72  @override
73  Widget build(BuildContext context) {
74    return Card(
75      margin: const EdgeInsets.symmetric(vertical: 4),
76      child: Padding(
77        padding: const EdgeInsets.all(12),
78        child: Text(task['title'] ?? ''),
79      ),
80    );
81  }
82}