Listbox with multiselect, drag & drop between lists, and reorder built in.
- 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
- Add the latest version of this package:
- Run
flutter pub add selectable_draggable_listbox
-or- - Edit
pubspec.yaml
and then runflutter pub get
:
dependencies:
selectable_draggable_listbox: ^latest_version
- Import the package
import 'package:selectable_draggable_listbox/selectable_draggable_listbox.dart';
// 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);
});
},
);
For more info on additional features like Drag & Drop and Customizable Templates, see examples and API: