flutter_simple_multiselect

Description:

flutter simple multiselect

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
copied to clipboard
Import it
import 'package:flutter_simple_multiselect/flutter_simple_multiselect.dart';
copied to clipboard
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;
})
copied to clipboard