MultiSelectField<T> class

A customizable MultiSelectField widget that allows users to select multiple options from a list with a search capability.

The MultiSelectField provides a user interface for selecting multiple items from a predefined list. It features a search bar to help users filter and find the options they are looking for quickly.

This widget is particularly useful in forms where users need to select multiple categories, tags, or options from a large dataset. It supports mobile and desktop platforms with responsive design adjustments.

Example usage:

class Demo extends StatelessWidget {
  const Demo({super.key});

  @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'),
        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',),
      ],
      onSelect: (selectedItems) {
        // Handle selected items here
        print(selectedItems.map((item) => item.value).toList());
      },
      useTextFilter: true, // Enables real-time text filtering
    );
  }
}

Properties:

  • options: A list of all available options.
  • selectedOptions: A list of options that are currently selected.
  • onSelectionChanged: A callback that is triggered when the selection changes.

Customization:

  • The search bar allows users to quickly filter options.
  • The layout adapts to different screen sizes and devices.
Inheritance

Constructors

MultiSelectField({Key? key, required List<Choice<T>> data(), required void onSelect(List<Choice<T>> choiceList, bool isFromDefaultData), Widget title(bool isEmpty)?, List<Choice<T>>? defaultData, bool useTextFilter = false, Decoration? decoration, bool singleSelection = false, bool menuHeightBaseOnContent = false, bool menuWidthBaseOnContent = false, Widget? itemMenuButton, ButtonStyle? buttonStyle, Widget iconLeft(bool menuState)?, Widget iconRight(bool menuState)?, MenuStyle? menuStyle, double? menuHeight, double? menuWidth, Widget? footer, Widget multiSelectWidget(Choice<T> choiceList)?, Widget singleSelectWidget(Choice<T> choiceList)?, bool isMandatory = false, TextStyle? itemMenuStyle, TextStyle? titleMenuStyle, TextStyle? textStyleSingleSelection, bool cleanCurrentSelection = false, String? label, TextStyle? textStyleLabel})
const

Properties

buttonStyle → ButtonStyle?
MenuItemButton Style
final
cleanCurrentSelection → bool
cleanCurrentSelection When set to true, the current selection will be cleared immediately. The check verifies if the current list is empty, so after the selection is cleared, it won't be executed again until there are items in the selection list. It's recommended not to have a constant true condition for clearing. Instead, you could validate if the list is null or if a process returns a specific result, thus preventing unnecessary clearing. Keeping this value constantly true will cause the selection to always be cleared immediately.
final
data → List<Choice<T>> Function()
final
decoration → Decoration?
final
defaultData → List<Choice<T>>?
final
final
hashCode → int
The hash code for this object.
no setterinherited
iconLeft → Widget Function(bool menuState)?
final
iconRight → Widget Function(bool menuState)?
final
isMandatory → bool
final
itemMenuButton → Widget?
Selectable child of MenuItemButton
final
itemMenuStyle → TextStyle?
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
label → String?
final
Sets a fixed height for the menu.
final
If set to true, the menu will have a height equal to the length of the content.
final
MultiselectField Style
final
Sets a fixed width for the menu.
final
If set to true, the menu will have a width equal to the length of the content.
final
multiSelectWidget → Widget Function(Choice<T> choiceList)?
final
onSelect → void Function(List<Choice<T>> choiceList, bool isFromDefaultData)
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
singleSelection → bool
final
singleSelectWidget → Widget Function(Choice<T> choiceList)?
final
textStyleLabel → TextStyle?
final
textStyleSingleSelection → TextStyle?
Or just modify a Theme.of(context).textTheme.labelLarge.
final
title → Widget Function(bool isEmpty)?
final
titleMenuStyle → TextStyle?
Text style items, title and value.
final
useTextFilter → bool
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<MultiSelectField<T>>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited