Package detailsv0.0.6

selectable_draggable_listbox

Listbox with multiselect, drag & drop between lists, and reorder built in.

AndroidiOSmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 19
Likes: 26
Pub points: 150

Install package

flutter pub add selectable_draggable_listbox

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that provides a listbox with built-in support for multi-selection, drag-and-drop reordering within a list, and drag-and-drop between multiple lists. It enhances user interaction by enabling intuitive data manipulation through gestures. Ideal for applications requiring dynamic list management, such as task organizers, playlist builders, or configuration panels. The package is cross-platform, supporting Android, iOS, macOS, Windows, and Linux.

Use cases

Task prioritization
Playlist management
Configuration panel sorting
Data reorganization in forms
Multi-list item transfer

Key features

Multi-selection support
In-list drag-and-drop reordering
Cross-list drag-and-drop
Built-in selection state management
Responsive gesture handling

Suitable for

Developers building interactive list interfaces
Apps needing flexible data rearrangement
Users who prefer drag-and-drop workflows
Cross-platform list management tools
UI-heavy productivity applications

Considerations

Requires careful handling of selection states
May need custom styling for complex layouts
Performance impact with very large lists
Limited to list-based data structures
Depends on correct widget tree structure for drag targets

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

selectable_draggable_listbox

Listbox with multiselect, drag & drop between lists, and reorder built in.

Features

Bind your data to a listview of custom widget
- Simple text item widget -or-
- Templated list item widget for more cusomizability
Multi-select items
- Shift-click to select items in sequence
- Ctrl/Cmd-click to select individual items
- Single-select only option available
Reorderable
- Click & drag the "three lines" icon to reorder item
Drag & Drop
- Drag items from/to different lists
- Each list may independently be a draggable, drop target, or both

Getting started

Add the latest version of this package:

Run flutter pub add selectable_draggable_listbox -or-
Edit pubspec.yaml and then run flutter pub get:

dependencies:
  selectable_draggable_listbox: ^latest_version

Import the package

import 'package:selectable_draggable_listbox/selectable_draggable_listbox.dart';

Usage

// Create your list and transform it to track selected items (list can be complex objects instead):
final myList = ['Apples','Cheese','Bread','Milk'].forListbox().toList();

// Create the listbox widget
return Listbox(
  items: myList,
  itemTemplate: (context, eventManager, index, item, onSelect) {
    // Define the template used for each listitem
    return SimpleListboxItem(
      key: Key('$index'), // Key is required for reordering
      item: item,
      label: item.data,
      eventManager: eventManager,
      onSelect: onSelect,
    );
  },
  onSelect: (itemsSelected) {
    // React to items selected
    // Note: (value of isSelected is not set automatically by Listbox,
    //  due to not knowing how your state is handled)
    setState(() {
      for (var item in myList) {
        item.isSelected = itemsSelected.contains(item);
      }
    });
  },
  onReorder: (oldIndex, newIndex) {
    // React to item reordered
    setState(() {
      // Note: this is an extension provided by the package
      myList.move(oldIndex, newIndex);
    });
  },
);