Introduction

This tutorial shows how to build a mobile Kanban board UI in Flutter with drag-and-drop reordering and autoscroll while dragging. You will learn a pragmatic approach using LongPressDraggable, DragTarget, and ScrollController to handle cross-column moves, smooth autoscroll when the user drags near edges, and tips for performance in mobile development.

Architecture Overview

Design the board as a horizontal list of columns. Each column contains a vertical list of cards. Key responsibilities:

• Column widget: displays header and a scrollable list of cards with a ScrollController.

• Card widget: wrapped with LongPressDraggable to start a drag operation and provide drag feedback.

• Drop handling: DragTarget at card positions and at column bottoms to determine insertion index.

• Autoscroll: when the drag pointer is near the top/bottom of a column, programmatically scroll that column while a drag is active.

Keep model logic separate: maintain a List> for columns and items so UI rebuilds are simple and state changes are explicit.

Building Columns And Cards

Use ListView for columns (horizontal) and ListView.builder for each column's cards (vertical). Wrap each card with LongPressDraggable. Provide meaningful drag feedback that resembles the card so users have context.

Important properties:

• data: include dragging metadata like source column index and item index.

• feedback: lightweight widget that mirrors the card but with elevation to avoid layout thrash.

• childWhenDragging: placeholder to keep list height stable.

Example draggable card:

LongPressDraggable<Map>(
  data: {'col': colIndex, 'index': itemIndex, 'item': item},
  feedback: Material(elevation: 6, child: CardWidget(item: item)),
  childWhenDragging: Opacity(opacity: 0.5, child: CardWidget(item: item)),
  child: CardWidget(item: item),
)

Place DragTarget widgets between cards and at the end of the column to accept drops. On accept, remove the item from the source column and insert it at the target index, then call setState.

Implementing Drag Reorder With Autoscroll

Autoscroll requires monitoring the drag pointer relative to each column's RenderBox. Use a global pointer position from the DragTarget's onWillAccept or onMove events. Keep a ScrollController per column and run a periodic scroll while the pointer remains within an autoscroll threshold near top or bottom.

A simple autoscroll strategy:

• Define threshold in logical pixels (for mobile, 48-80px works well).

• On pointer move, compute local dy inside column. If dy <= threshold, set scrollVelocity negative; if dy >= height - threshold, set positive.

• Use a Ticker or Timer to apply scrollController.jumpTo or animateTo by a small delta each tick while dragging.

Autoscroll snippet:

void startAutoScroll(ScrollController ctrl, double velocity) {
  stopAutoScroll();
  _autoTimer = Timer.periodic(Duration(milliseconds: 16), (_) {
    if (!ctrl.hasClients) return;
    final newOffset = (ctrl.offset + velocity).clamp(0.0, ctrl.position.maxScrollExtent);
    ctrl.jumpTo(newOffset);
  });
}

void stopAutoScroll() { _autoTimer?.cancel(); _autoTimer = null; }

Call startAutoScroll with small velocities like 4-12 pixels per tick depending on how close to the edge the pointer is. When the drag ends or pointer leaves threshold, stopAutoScroll.

Edge interactions: ensure the DragTarget stays responsive during autoscroll. Use onMove to keep computing the active drop index as the list shifts.

Performance And Edge Cases

• Use const widgets where possible and avoid rebuilding entire boards; update only affected columns.

• For long lists, prefer ReorderableListView inside a column if you do not need cross-column moves; otherwise custom DragTargets are required for cross-column interactions.

• Avoid heavy feedback widgets; keep the feedback minimal to prevent jank.

• On mobile, test on physical devices for touch precision and gesture conflicts with system gestures. Adjust long press duration or consider a press-and-hold affordance.

• Handle simultaneous autoscroll in multiple columns by starting/stopping timers per column and ensuring only the column under the pointer scrolls.

Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.

Conclusion

Building a Kanban board in Flutter with drag reorder and autoscroll is tractable with LongPressDraggable, DragTarget, ScrollController, and a small autoscroll loop. Separate model state, use per-column controllers, and tune autoscroll thresholds and velocities for a good mobile development experience. With careful handling of drag feedback and targeted updates you can achieve a smooth, native-feeling board on Flutter mobile.