Multi-container sortable

Multi-container sortable moves items within and across lists — the shape of a Kanban board. It is a supported preset over the shared engine, so the same code drives Flutter and the web.

You'll learn

—The three components that make a multi-list board.
—How to wire columns and cards.
—How to apply a cross-list move to your own state.

Anatomy

•SortableMultiScope — owns the whole board and the move policy across all columns.
•SortableMultiContainerArea — one column; a drop region that holds an ordered list of items.
•SortableMultiItem — one card; draggable within and between columns.

Usage

Nest the three components and feed them your board model — a map of column id to the ordered card ids in that column.

board.dart

SortableMultiScope(
  controller: controller,
  columnIds: columns, // List<DndId>
  onMove: _onMove,
  child: Row(
    children: [
      for (final columnId in columns)
        SortableMultiContainerArea(
          id: columnId,
          itemIds: board[columnId]!,
          child: Column(
            children: [
              for (final cardId in board[columnId]!)
                SortableMultiItem(id: cardId, child: CardTile(cardId)),
            ],
          ),
        ),
    ],
  ),
)

Applying moves

A move reports the source and target column plus the indices. You remove the card from its old column and insert it into the new one — the board owns its data, the engine only resolves intent. The Kanban showcase on the home page is built on exactly this preset.

on_move.dart

void _onMove(SortableMultiMoveDetails details) {
  setState(() {
    final card = board[details.fromColumn]!.removeAt(details.fromIndex);
    board[details.toColumn]!.insert(details.toIndex, card);
  });
}

Sortable lists The single-list preset this builds on. Accessibility Keyboard moves across columns, announced.

Previous ← Sortable lists Next Recipes →