custom UI and fix bugs

lib/bottom_sheet/multi_select_bottom_sheet.dart

@@ -6,6 +6,7 @@ import '../util/multi_select_list_type.dart';
 /// A bottom sheet widget containing either a classic checkbox style list, or a chip style list.
 class MultiSelectBottomSheet<V> extends StatefulWidget
     with MultiSelectActions<V> {
+  final int validationSelectedLength; 
   /// List of items to select from.
   final List<MultiSelectItem<V>> items;
 
@@ -79,6 +80,7 @@ class MultiSelectBottomSheet<V> extends StatefulWidget
   MultiSelectBottomSheet({
     required this.items,
     required this.initialValue,
+    this.validationSelectedLength = 5,
     this.title,
     this.onSelectionChanged,
     this.onConfirm,
@@ -318,7 +320,7 @@ class _MultiSelectBottomSheetState<V> extends State<MultiSelectBottomSheet<V>> {
                       child: TextButton(
                         onPressed: () {
                           widget.onConfirmTap(
-                              context, _selectedValues, widget.onConfirm);
+                              context, _selectedValues, widget.onConfirm, widget.validationSelectedLength);
                         },
                         child: widget.confirmText ??
                             Text(

lib/chip_display/multi_select_chip_display.dart

@@ -132,11 +132,14 @@ class MultiSelectChipDisplay<V> extends StatelessWidget {
       child: ChoiceChip(
         shape: shape as OutlinedBorder?,
         avatar: icon != null
-            ? Icon(
+            ? Padding(
+                padding: EdgeInsets.only(left: 4.0),
+                child: Icon(
                   icon!.icon,
                   color: colorator != null && colorator!(item.value) != null
                       ? colorator!(item.value)!.withOpacity(1)
                       : icon!.color ?? Theme.of(context).primaryColor,
+                ),
               )
             : null,
         label: Container(
@@ -144,26 +147,11 @@ class MultiSelectChipDisplay<V> extends StatelessWidget {
           child: Text(
             item.label,
             overflow: TextOverflow.ellipsis,
-            style: TextStyle(
-              color: colorator != null && colorator!(item.value) != null
-                  ? textStyle != null
-                      ? textStyle!.color ?? colorator!(item.value)
-                      : colorator!(item.value)
-                  : textStyle != null && textStyle!.color != null
-                      ? textStyle!.color
-                      : chipColor != null
-                          ? chipColor!.withOpacity(1)
-                          : null,
-              fontSize: textStyle != null ? textStyle!.fontSize : null,
-            ),
+            style: textStyle,
           ),
         ),
         selected: items!.contains(item),
-        selectedColor: colorator != null && colorator!(item.value) != null
-            ? colorator!(item.value)
-            : chipColor != null
-                ? chipColor
-                : Theme.of(context).primaryColor.withOpacity(0.33),
+        selectedColor: chipColor,
         onSelected: (_) {
           if (onTap != null) onTap!(item.value);
         },

lib/dialog/mult_select_dialog.dart

@@ -5,6 +5,7 @@ import '../util/multi_select_list_type.dart';
 
 /// A dialog containing either a classic checkbox style list, or a chip style list.
 class MultiSelectDialog<V> extends StatefulWidget with MultiSelectActions<V> {
+  final int validationSelectedLength;
   /// List of items to select from.
   final List<MultiSelectItem<V>> items;
 
@@ -75,6 +76,7 @@ class MultiSelectDialog<V> extends StatefulWidget with MultiSelectActions<V> {
   MultiSelectDialog({
     required this.items,
     required this.initialValue,
+    this.validationSelectedLength = 5,
     this.title,
     this.onSelectionChanged,
     this.onConfirm,
@@ -163,25 +165,7 @@ class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> {
         label: Text(
           item.label,
           style: _selectedValues.contains(item.value)
-              ? TextStyle(
-                  color: widget.colorator != null &&
-                          widget.colorator!(item.value) != null
-                      ? widget.selectedItemsTextStyle != null
-                          ? widget.selectedItemsTextStyle!.color ??
-                              widget.colorator!(item.value)!.withOpacity(1)
-                          : widget.colorator!(item.value)!.withOpacity(1)
-                      : widget.selectedItemsTextStyle != null
-                          ? widget.selectedItemsTextStyle!.color ??
-                              (widget.selectedColor != null
-                                  ? widget.selectedColor!.withOpacity(1)
-                                  : Theme.of(context).primaryColor)
-                          : widget.selectedColor != null
-                              ? widget.selectedColor!.withOpacity(1)
-                              : null,
-                  fontSize: widget.selectedItemsTextStyle != null
-                      ? widget.selectedItemsTextStyle!.fontSize
-                      : null,
-                )
+              ? widget.selectedItemsTextStyle
               : widget.itemsTextStyle,
         ),
         selected: _selectedValues.contains(item.value),
@@ -297,7 +281,7 @@ class _MultiSelectDialogState<V> extends State<MultiSelectDialog<V>> {
                 ),
               ),
           onPressed: () {
-            widget.onConfirmTap(context, _selectedValues, widget.onConfirm);
+            widget.onConfirmTap(context, _selectedValues, widget.onConfirm, widget.validationSelectedLength);
           },
         )
       ],

lib/dialog/multi_select_dialog_field.dart

@@ -8,18 +8,11 @@ import 'mult_select_dialog.dart';
 /// A customizable InkWell widget that opens the MultiSelectDialog
 // ignore: must_be_immutable
 class MultiSelectDialogField<V> extends FormField<List<V>> {
+  final Widget titleForm;
+  final Widget showModalDialogWidget;
   /// An enum that determines which type of list to render.
   final MultiSelectListType? listType;
 
-  /// Style the Container that makes up the field.
-  final BoxDecoration? decoration;
-
-  /// Set text that is displayed on the button.
-  final Text? buttonText;
-
-  /// Specify the button icon.
-  final Icon? buttonIcon;
-
   /// The text at the top of the dialog.
   final Widget? title;
 
@@ -98,13 +91,12 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
   FormFieldState<List<V>>? state;
 
   MultiSelectDialogField({
+    required this.titleForm,
+    required this.showModalDialogWidget,
     required this.items,
     required this.onConfirm,
     this.title,
-    this.buttonText,
-    this.buttonIcon,
     this.listType,
-    this.decoration,
     this.onSelectionChanged,
     this.chipDisplay,
     this.searchable,
@@ -139,11 +131,10 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
               _MultiSelectDialogFieldView field =
                   _MultiSelectDialogFieldView<V>(
                 title: title,
+                titleForm: titleForm,
+                showModalDialogWidget: showModalDialogWidget,
                 items: items,
-                buttonText: buttonText,
-                buttonIcon: buttonIcon,
                 chipDisplay: chipDisplay,
-                decoration: decoration,
                 listType: listType,
                 onConfirm: onConfirm,
                 onSelectionChanged: onSelectionChanged,
@@ -166,22 +157,21 @@ class MultiSelectDialogField<V> extends FormField<List<V>> {
                 selectedItemsTextStyle: selectedItemsTextStyle,
                 checkColor: checkColor,
               );
-              return _MultiSelectDialogFieldView<V?>._withState(field as _MultiSelectDialogFieldView<V?>, state);
+              return _MultiSelectDialogFieldView<V>._withState(field as _MultiSelectDialogFieldView<V>, state);
             });
 }
 
 // ignore: must_be_immutable
 class _MultiSelectDialogFieldView<V> extends StatefulWidget {
+  final Widget titleForm;
+  final Widget showModalDialogWidget;
   final MultiSelectListType? listType;
-  final BoxDecoration? decoration;
-  final Text? buttonText;
-  final Icon? buttonIcon;
   final Widget? title;
   final List<MultiSelectItem<V>> items;
   final void Function(List<V>)? onSelectionChanged;
   final MultiSelectChipDisplay<V>? chipDisplay;
   final List<V>? initialValue;
-  final void Function(List<V>)? onConfirm;
+  final void Function(List<V>) onConfirm;
   final bool? searchable;
   final Text? confirmText;
   final Text? cancelText;
@@ -202,14 +192,13 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
   FormFieldState<List<V>>? state;
 
   _MultiSelectDialogFieldView({
+    required this.titleForm,
+    required this.showModalDialogWidget,
     required this.items,
     this.title,
-    this.buttonText,
-    this.buttonIcon,
     this.listType,
-    this.decoration,
     this.onSelectionChanged,
-    this.onConfirm,
+    required this.onConfirm,
     this.chipDisplay,
     this.initialValue,
     this.searchable,
@@ -235,11 +224,10 @@ class _MultiSelectDialogFieldView<V> extends StatefulWidget {
   _MultiSelectDialogFieldView._withState(
       _MultiSelectDialogFieldView<V> field, FormFieldState<List<V>> state)
       : items = field.items,
+        showModalDialogWidget = field.showModalDialogWidget,
+        titleForm = field.titleForm,
         title = field.title,
-        buttonText = field.buttonText,
-        buttonIcon = field.buttonIcon,
         listType = field.listType,
-        decoration = field.decoration,
         onSelectionChanged = field.onSelectionChanged,
         onConfirm = field.onConfirm,
         chipDisplay = field.chipDisplay,
@@ -369,7 +357,7 @@ class __MultiSelectDialogFieldViewState<V>
               widget.state!.didChange(selected);
             }
             _selectedItems = selected;
-            if (widget.onConfirm != null) widget.onConfirm!(selected);
+            widget.onConfirm(selected);
           },
         );
       },
@@ -381,64 +369,28 @@ class __MultiSelectDialogFieldViewState<V>
     return Column(
       mainAxisAlignment: MainAxisAlignment.start,
       children: <Widget>[
-        InkWell(
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                widget.titleForm,
+                Align(
+                  alignment: Alignment.centerRight,
+                  child: InkWell(
                     onTap: () {
                       _showDialog(context);
                     },
-          child: Container(
-            decoration: widget.state != null
-                ? widget.decoration ??
-                    BoxDecoration(
-                      border: Border(
-                        bottom: BorderSide(
-                          color: widget.state != null && widget.state!.hasError
-                              ? Colors.red.shade800.withOpacity(0.6)
-                              : _selectedItems.isNotEmpty
-                                  ? (widget.selectedColor != null &&
-                                          widget.selectedColor !=
-                                              Colors.transparent)
-                                      ? widget.selectedColor!
-                                      : Theme.of(context).primaryColor
-                                  : Colors.black45,
-                          width: _selectedItems.isNotEmpty
-                              ? (widget.state != null && widget.state!.hasError)
-                                  ? 1.4
-                                  : 1.8
-                              : 1.2,
-                        ),
+                    child: widget.showModalDialogWidget
+                  )
                 ),
+              ],
             )
-                : widget.decoration,
-            padding: EdgeInsets.all(10),
-            child: Row(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: <Widget>[
-                widget.buttonText ?? Text("Select"),
-                widget.buttonIcon ?? Icon(Icons.arrow_downward),
           ],
         ),
-          ),
-        ),
         _buildInheritedChipDisplay(),
-        widget.state != null && widget.state!.hasError
-            ? SizedBox(height: 5)
-            : Container(),
-        widget.state != null && widget.state!.hasError
-            ? Row(
-                children: <Widget>[
-                  Padding(
-                    padding: const EdgeInsets.only(left: 4),
-                    child: Text(
-                      widget.state!.errorText!,
-                      style: TextStyle(
-                        color: Colors.red[800],
-                        fontSize: 12.5,
-                      ),
-                    ),
-                  ),
-                ],
-              )
-            : Container(),
       ],
     );
   }

lib/util/multi_select_actions.dart

@@ -21,8 +21,10 @@ class MultiSelectActions<V> {
   /// Pops the dialog from the navigation stack and returns the selected values.
   /// Calls the onConfirm function if one was provided.
   void onConfirmTap(
-      BuildContext ctx, List<V> selectedValues, Function(List<V>)? onConfirm) {
+      BuildContext ctx, List<V> selectedValues, Function(List<V>)? onConfirm, int validationSelectedLength) {
+    if (selectedValues.length <= validationSelectedLength) {
       Navigator.pop(ctx, selectedValues); 
+    }
     if (onConfirm != null) {
       onConfirm(selectedValues);
     }