Quickstart

Three steps to your first drag-and-drop: wrap an area in a scope, mark a draggable and a drop target, then react when they meet. The API is the same on Flutter and Jaspr — switch the tab on any snippet to compare.

You'll learn

—How to wrap an interactive area in a DndScope.
—How to make an element draggable and define a drop target.
—How to react to a drop with onDragEnd.

Wrap in a scope

A DndScope owns one drag interaction. Everything draggable or droppable lives inside it. Start by wrapping the area you want to make interactive.

Make a draggable

Wrap any element in a DndDraggable with a unique DndId. That is all it takes to pick it up.

draggable.dart

import 'package:dnd_kit_flutter/dnd_kit_flutter.dart';
import 'package:flutter/widgets.dart';

DndDraggable(
  id: const DndId('card'),
  child: const Text('Drag me'),
)

Add a droppable

A DndDroppable is a target a draggable can land on. It also takes a unique id, which you read back when the drag ends.

droppable.dart

DndDroppable(
  id: const DndId('inbox'),
  child: const Text('Inbox'),
)

Put it together

Listen to onDragEnd to move your data when a draggable lands on a target. You own the state; dnd_kit reports the move.

main.dart

DndScope(
  child: Column(
    children: [
      DndDraggable(
        id: const DndId('card'),
        onDragEnd: (event) {
          if (event.overId == const DndId('inbox')) {
            moveCardToInbox();
          }
        },
        child: const Text('Drag me'),
      ),
      DndDroppable(
        id: const DndId('inbox'),
        child: const Text('Inbox'),
      ),
    ],
  ),
)

Draggable Drag handles, activation, and drag data in depth. Sortable lists Reorder a list with the sortable preset.

Previous ← Installation Next Draggable →