MultiSelectFormField constructor

MultiSelectFormField({
  1. FormFieldSetter? onSaved,
  2. FormFieldValidator? validator,
  3. dynamic initialValue,
  4. AutovalidateMode autovalidate = AutovalidateMode.disabled,
  5. Widget title = const Text('Title'),
  6. Widget hintWidget = const Text('Tap to select one or more'),
  7. bool required = false,
  8. String errorText = 'Please select one or more options',
  9. Widget? leading,
  10. List? dataSource,
  11. String? textField,
  12. String? valueField,
  13. Function? change,
  14. Function? open,
  15. Function? close,
  16. String okButtonLabel = 'OK',
  17. String cancelButtonLabel = 'CANCEL',
  18. Color? fillColor,
  19. InputBorder? border,
  20. Widget? trailing,
  21. TextStyle? chipLabelStyle,
  22. bool enabled = true,
  23. Color? chipBackGroundColor,
  24. TextStyle dialogTextStyle = const TextStyle(),
  25. ShapeBorder dialogShapeBorder = const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(0.0))),
  26. Color? checkBoxActiveColor,
  27. Color? checkBoxCheckColor,
})

Implementation

MultiSelectFormField({
  FormFieldSetter<dynamic>? onSaved,
  FormFieldValidator<dynamic>? validator,
  dynamic initialValue,
  AutovalidateMode autovalidate = AutovalidateMode.disabled,
  this.title = const Text('Title'),
  this.hintWidget = const Text('Tap to select one or more'),
  this.required = false,
  this.errorText = 'Please select one or more options',
  this.leading,
  this.dataSource,
  this.textField,
  this.valueField,
  this.change,
  this.open,
  this.close,
  this.okButtonLabel = 'OK',
  this.cancelButtonLabel = 'CANCEL',
  this.fillColor,
  this.border,
  this.trailing,
  this.chipLabelStyle,
  this.enabled = true,
  this.chipBackGroundColor,
  this.dialogTextStyle = const TextStyle(),
  this.dialogShapeBorder = const RoundedRectangleBorder(
    borderRadius: BorderRadius.all(Radius.circular(0.0)),
  ),
  this.checkBoxActiveColor,
  this.checkBoxCheckColor,
}) : super(
        onSaved: onSaved,
        validator: validator,
        initialValue: initialValue,
        autovalidateMode: autovalidate,
        builder: (FormFieldState<dynamic> state) {
          List<Widget> _buildSelectedOptions(state) {
            List<Widget> selectedOptions = [];

            if (state.value != null) {
              state.value.forEach((item) {
                var existingItem = dataSource!.singleWhere(((itm) => itm[valueField] == item),
                    orElse: () => null);
                selectedOptions.add(Chip(
                  labelStyle: chipLabelStyle,
                  backgroundColor: chipBackGroundColor,
                  label: Text(
                    existingItem[textField],
                    overflow: TextOverflow.ellipsis,
                  ),
                ));
              });
            }

            return selectedOptions;
          }

          return InkWell(

            onTap:  !enabled ? null :() async {
              List? initialSelected = state.value;
              if (initialSelected == null) {
                initialSelected = [];
              }

              final items = <MultiSelectDialogItem<dynamic>>[];
                    dataSource!.forEach((item) {
                items.add(
                    MultiSelectDialogItem(item[valueField], item[textField]));
              });

              List? selectedValues = await showDialog<List>(
                context: state.context,
                builder: (BuildContext context) {
                  return MultiSelectDialog(
                    title: title,
                    okButtonLabel: okButtonLabel,
                    cancelButtonLabel: cancelButtonLabel,
                    items: items,
                    initialSelectedValues: initialSelected,
                    labelStyle: dialogTextStyle,
                    dialogShapeBorder: dialogShapeBorder,
                    checkBoxActiveColor: checkBoxActiveColor,
                    checkBoxCheckColor: checkBoxCheckColor,
                  );
                },
              );

              if (selectedValues != null) {
                state.didChange(selectedValues);
                state.save();
              }
            },
            child: InputDecorator(
              decoration: InputDecoration(
                filled: true,
                errorText: state.hasError ? state.errorText : null,
                errorMaxLines: 4,
                fillColor: fillColor ?? Theme.of(state.context).canvasColor,
                border: border ?? UnderlineInputBorder(),
              ),
              isEmpty: state.value == null || state.value == '',
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.fromLTRB(0, 2, 0, 0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Expanded(
                          child: title,
                        ),
                        required
                            ? Padding(
                                padding: EdgeInsets.only(top: 5, right: 5),
                                child: Text(
                                  ' *',
                                  style: TextStyle(
                                    color: Colors.red.shade700,
                                    fontSize: 17.0,
                                  ),
                                ),
                              )
                            : Container(),
                        Icon(
                          Icons.arrow_drop_down,
                          color: Colors.black87,
                          size: 25.0,
                        ),
                      ],
                    ),
                  ),
                  state.value != null && state.value.length > 0
                      ? Wrap(
                          spacing: 8.0,
                          runSpacing: 0.0,
                          children: _buildSelectedOptions(state),
                        )
                      : new Container(
                          padding: EdgeInsets.only(top: 4),
                          child: hintWidget,
                        )
                ],
              ),
            ),
          );
        },
      );