Flutter Simple Multiselect
v2.1.1
There are a few multiselect packages for flutter but somehow i haven't found one that is simple like this. It's inspired by the vue multiselect. You can use static or async (server) data and use it as searchable single or multiselect. Everything is customizable.
Note: This package is created on the backbone of Material Tag Editor.
Features
Fetch and search async data directly from server or from static data. Use it for multiselect and single, and use it somehow naturally.
Usage
Add the package to pubspec.yaml
dependencies:
flutter_simple_multiselect: x.x.x
Import it
import 'package:flutter_simple_multiselect/flutter_simple_multiselect.dart';
Full examples for all three options are in /example folder so please take a look for working version.
Use widget: (Async ultiselect sample)
FlutterMultiselect(
multiselect: true,
autofocus: false,
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 0),
enableBorderColor: lineColor,
focusedBorderColor: lineColor,
borderRadius: 5,
borderSize: 1,
resetTextOnSubmitted: true,
minTextFieldWidth: 300,
suggestionsBoxMaxHeight: 300,
length: selectedItemsAsync.length,
isLoading: isLoading,
tagBuilder: (context, index) => SelectTag(
index: index,
label: selectedItemsAsync[index]["name"],
onDeleted: (value) {
selectedItemsAsync.removeAt(index);
setState(() {});
},
),
suggestionBuilder: (context, state, data) {
var existingIndex = selectedItemsAsync.indexWhere((element) => element["uuid"] == data["uuid"]);
var selectedData = data;
return Material(
child: GestureDetector(
onPanDown: (_) {
var existingIndex = selectedItemsAsync.indexWhere((element) => element["uuid"] == data["uuid"]);
if (existingIndex >= 0) {
selectedItemsAsync.removeAt(existingIndex);
} else {
selectedItemsAsync.add(data);
}
state.selectAndClose(data);
setState(() {});
}
child: ListTile(
selected: existingIndex >= 0,
trailing: existingIndex >= 0 ? const Icon(Icons.check) : null,
selectedColor: Colors.white,
selectedTileColor: Colors.green,
title: Text(selectedData["name"].toString()),
)));
},
suggestionsBoxElevation: 10,
findSuggestions: (String query) async {
setState(() {
isLoading = true;
});
var data = await searchFunctionAsync(query);
setState(() {
isLoading = false;
});
return data;
})