Flutter – Combining reorderable widgets (in a Wrap) with widgets in another container to achieve multiple drag-and-drop behaviors

Based on Kumah Andrews' answer I fixed the reorder in the right column. Stillstuggling with combining reordering in the left. Using the library caused it to only accept one drag-action at a time.

Here's the updated code:

import 'package:flutter/material.dart';

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

  @override
  DragDropReorderableExampleState createState() =>
      DragDropReorderableExampleState();
}

class DragDropReorderableExampleState
    extends State<DragDropReorderableExample> {
  List<String> libraryCards = [
    "Card A",
    "Card B",
    "Card C",
    "Card D",
    "Card E",
    "Card F",
  ];
  List<String> droppedCards = [];

  int? dropIndex;
  int dragIndex = -1;
  bool isDraggingInsideRight = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Drag and Drop Example')),
      body: Row(
        children: [
          Expanded(
            flex: 3,
            child: _getLibraryWidget(),
          ),
          Expanded(
            flex: 1,
            child: _getDroppableContainer(),
          ),
        ],
      ),
    );
  }

  Widget _getLibraryWidget() {
    return Container(
      height: double.infinity,
      color: Colors.blue[50],
      padding: const EdgeInsets.all(8),
      child: Wrap(
        spacing: 8,
        runSpacing: 8,
        children: libraryCards.map((card) {
          return Draggable<String>(
            data: card,
            feedback: Card(
              elevation: 10,
              color: Colors.blue[200],
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Text(card),
              ),
            ),
            childWhenDragging: Opacity(
              opacity: 0.5,
              child: Card(
                color: Colors.blue[100],
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: Text(card),
                ),
              ),
            ),
            onDragStarted: () =>
                setState(() => isDraggingInsideRight = false),
            child: Card(
              elevation: 10,
              color: Colors.blue[100],
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Text(card),
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

  Widget _getDroppableContainer() {
    return Container(
      color: Colors.green[50],
      padding: const EdgeInsets.all(8),
      child: DragTarget<String>(
        onAcceptWithDetails: (data) {
          setState(() {
            droppedCards.insert(
              dropIndex ?? droppedCards.length,
              data.data,
            );

            if (isDraggingInsideRight) {
              if (dragIndex < dropIndex!) {
                droppedCards.removeAt(dragIndex);
              } else {
                droppedCards.removeAt(dragIndex + 1);
              }
            }

            dropIndex = null;
            dragIndex = -1;
          });
        },
        onMove: (details) {
          RenderBox renderBox = context.findRenderObject() as RenderBox;
          double localDy = renderBox.globalToLocal(details.offset).dy;
          double itemHeight = 70; // Approximate height of each card
          dropIndex =
              (localDy / itemHeight).floor().clamp(0, droppedCards.length);
          setState(() {});
        },
        onLeave: (_) => setState(() => dropIndex = null),
        builder: (context, candidateData, rejectedData) {
          return Column(
            children: [
              for (int i = 0; i <= droppedCards.length; i++) ...[
                if (i == dropIndex)
                  // Replace with SizedBox to show a gap between cards
                  // const SizedBox(height: 40),
                const Divider(
                  color: Colors.green,
                  thickness: 3,
                ),
                if (i < droppedCards.length)
                  Draggable<String>(
                    data: droppedCards[i],
                    feedback: Card(
                      color: Colors.green[200],
                      child: Container(
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: Colors.green,
                            width: 2,
                          ),
                          borderRadius: BorderRadius.circular(20),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(16),
                          child: Text(droppedCards[i]),
                        ),
                      ),
                    ),
                    childWhenDragging: const SizedBox(),
                    onDragStarted: () {
                      setState(() {
                        isDraggingInsideRight = true;
                        dragIndex = i;
                      });
                    },
                    child: dragIndex == i
                        ? const SizedBox()
                        : Card(
                            color: Colors.green[100],
                            child: Padding(
                              padding: const EdgeInsets.all(16),
                              child: Text(droppedCards[i]),
                            ),
                          ),
                  ),
              ],
            ],
          );
        },
      ),
    );
  }
}