MultiSelectField

multiselect_field

MultiSelectField is a custom implementation of a multi-select field for Flutter applications. This library provides a flexible and highly configurable solution for projects that require native multi-selection, real-time text filtering, and more advanced features.

Features

Flexibility: Complete control over the widget's design and behavior, allowing precise customizations according to project requirements.
Native multi-selection: Implements multi-select functionality natively without the need for additional packages or complex modifications.
Advanced features: Includes real-time text filtering and the display of selected items as chips, enhancing the user experience.
Maintenance and evolution: As a custom implementation, it allows easy adaptation and evolution as project needs change.
Independence: Avoids third-party dependencies, improving project stability and long-term control.

Library

Check out the library on pub.dev.

Installation

Add the dependency to your pubspec.yaml file:

dependencies:
  multiselect_field: ^1.4.2

Then, install the dependencies using:

flutter pub get

Or

flutter pub add multiselect_field

Usage

Basic Example

import 'package:multi_select_field/multiselect_field.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiSelectField<Car>(
      data: () => [
        Choice<Car>('Ferrari'),
        Choice<Car>('2', '488 GTB', metadata: Car(103, 27.500, 2015)),
        Choice<Car>('3', '458 Italia', metadata: Car(99, 22.000, 2009)),
        Choice<Car>('4', 'Portofino', metadata: Car(105, 31.000, 2017)),
        Choice<Car>('5', 'California T', metadata: Car(102, 25.000, 2016)),
        Choice<Car>('6', 'F8 Tributo', metadata: Car(104, 30.000, 2019)),
      ],
      onSelect: (selectedItems) {
        // Handle selected items here
        print(selectedItems.map((item) => item.value).toList());
      },
      useTextFilter: true, // Enables real-time text filtering
    );
  }
}

Properties

data: List<Choice<T>> Function(). Function that returns a list of Choice elements for selection.
onSelect: Function(List<Choice<T>> ChoiceList). Callback invoked when items are selected.
title: Widget Function(bool isEmpty)?. Optional widget that displays a title, depending on whether the selection is empty.
footer: Widget?. Optional widget displayed at the bottom.
singleSelectWidget: Widget Function(Choice<T> ChoiceList)?. Optional widget for displaying a single selected item.
multiSelectWidget: Widget Function(Choice<T> ChoiceList)?. Optional widget for displaying multiple selected items.
defaultData: List<Choice<T>>?. Optional function that returns the default list of selected items.
singleSelection: bool. Defines if the widget should allow only a single selection. Defaults to false.
useTextFilter: bool. Enables or disables real-time text filtering.
decoration: Decoration?. Custom decoration for the widget.
padding: EdgeInsetsGeometry?. Defines the internal padding of the widget.
textStyleSingleSelection: TextStyle?. Text style for single selection.

Advanced Example

MultiSelectField<String>(
  data: () => [
    Choice(key: 'apple', value: 'Apple'),
    Choice(key: 'banana', value: 'Banana'),
    Choice(key: 'orange', value: 'Orange'),
  ],
  defaultData: [Choice(key: 'banana', value: 'Banana')],
  ///[isFromDefault] Helps to know if current selected element is from default data or not.
  onSelect: (selectedItems, isFromDefaultData) {
    // Update selection state
  },
  title: (isEmpty) => Text(isEmpty ? 'Select a fruit' : 'Selected fruits'),
  singleSelection: false,
  useTextFilter: true,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue),
    borderRadius: BorderRadius.circular(5),
  ),
  padding: EdgeInsets.all(10),
  multiSelectWidget: (item) => Chip(
    label: Text(item.value),
    onDeleted: () {
      // Remove selected item
    },
  ),
);