Last updated:
0 purchases
selectable draggable listbox
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
copied to clipboard
Import the package
import 'package:selectable_draggable_listbox/selectable_draggable_listbox.dart';
copied to clipboard
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);
});
},
);
copied to clipboard
Advanced Usage #
For more info on additional features like Drag & Drop and Customizable Templates, see examples and API:
Example
API
Support #
You can support me by buying me a coffee
And also don't forget to star this package on GitHub
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.