Skip to content

holotrek/selectable_draggable_listbox

Repository files navigation

Pub License: MIT

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

Feature Demo

Getting started

  1. 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
  1. 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);
    });
  },
);

Advanced Usage

For more info on additional features like Drag & Drop and Customizable Templates, see examples and API:

Support

You can support me by buying me a coffee Buy me a coffee

And also don't forget to star this package on GitHub