---

MultiSelectField

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.6.8

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.
• scrollbarConfig: ScrollbarConfig. Modify the size, color, margins, etc.

Advanced Example with scrollbarConfig

MultiSelectField<String>(
  data: () => [
      Choice(key: 'apple', value: 'Apple'),
      Choice(key: 'banana', value: 'Banana'),
      Choice(key: 'orange', value: 'Orange'),
    ],
    scrollbarConfig: ScrollbarConfig(
      visible: true,
      themeData: ScrollbarThemeData(
      thickness: WidgetStateProperty.all(10.0),
      thumbColor: WidgetStateProperty.all(Colors.orange),
      trackColor: WidgetStateProperty.all(Colors.grey.withValues(alpha: 0.2)),
      radius: const Radius.circular(5.0),
      thumbVisibility: WidgetStateProperty.all(true),
      trackVisibility: WidgetStateProperty.all(true),
    ),
  ),
  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
    },
  ),
);

Some screen captures

With grouping list.

Multiple selection.

Multiple selection custom widget.

Text Filtering.

With title and footer.

Video example

Contribution

Contributions are welcome! If you have ideas for new features or improvements, please open an issue or submit a pull request.

1. Fork the repository.
2. Create a new branch (git checkout -b feature/new-feature).
3. Commit your changes (git commit -am 'Add new feature').
4. Push to the branch (git push origin feature/new-feature).
5. Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

---