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;
    })