Merge pull request #5 from JhonaCodes/item_color

itemColor feature
JhonaCodes · Jan 7, 2025 · 1cee49d · 1cee49d
2 parents 1d6e960 + 4c0bb18
commit 1cee49d
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 1.6.1
+- New feature `itemColor`, Customize the colors for selected, hovered, and unselected items.
+
 ## 1.6.0
 - New feature `selectAllOption`, You will have a default option to select all the items on your list.
 - Solve transparent color on `x` delete widget. 

diff --git a/README.md b/README.md
@@ -31,7 +31,7 @@ Add the dependency to your `pubspec.yaml` file:
 
 ```yaml
 dependencies:
-  multiselect_field: ^1.6.0
+  multiselect_field: ^1.6.1
 ```
 
 Then, install the dependencies using:

diff --git a/lib/core/multi_select.dart b/lib/core/multi_select.dart
@@ -112,8 +112,12 @@ class MultiSelectField<T> extends StatefulWidget {
   final String? label;
   final TextStyle? textStyleLabel;
 
+  /// Set to `true` to display an [All] option in the multiselect list.
   final bool selectAllOption;
 
+  /// Customize the colors for [selected], [hovered], and [unselected] items.
+  final ItemColor? itemColor;
+
   const MultiSelectField({
     super.key,
     required this.data,
@@ -141,6 +145,7 @@ class MultiSelectField<T> extends StatefulWidget {
     this.textStyleSingleSelection,
     this.cleanCurrentSelection = false,
     this.selectAllOption = false,
+    this.itemColor,
     this.label,
     this.textStyleLabel,
   });
@@ -179,6 +184,11 @@ class _MultiSelectFieldState<T> extends State<MultiSelectField<T>>
       .where((ele) => ele.key != null || ele.key!.isNotEmpty)
       .toList();
 
+  ItemColor get _currentItemColor => ItemColor(
+      selected: Colors.blueAccent.shade100.withAlpha(50),
+      unSelected: Colors.transparent,
+      hovered: Colors.blueAccent.shade100.withAlpha(30));
+
   @override
   void initState() {
     super.initState();
@@ -494,18 +504,19 @@ class _MultiSelectFieldState<T> extends State<MultiSelectField<T>>
                                 /// Hovered only on web version
                                 if ((state.contains(WidgetState.hovered) &&
                                     _isMobile)) {
-                                  return Colors.grey
-                                      .withValues(alpha: (255.0 * 0.05));
+                                  return widget.itemColor?.hovered ??
+                                      _currentItemColor.hovered;
                                 }
 
                                 /// Color When is element selected
                                 if ((!isGroupingTitle && _isSelected(result))) {
-                                  return Colors.lightBlueAccent
-                                      .withValues(alpha: (255.0 * 0.05));
+                                  return widget.itemColor?.selected ??
+                                      _currentItemColor.selected;
                                 }
 
                                 /// Default color, No selected, no hovered.
-                                return Colors.transparent;
+                                return widget.itemColor?.unSelected ??
+                                    _currentItemColor.unSelected;
                               }),
                             ),
                         onPressed: isGroupingTitle
@@ -756,3 +767,15 @@ bool isSameData<T>(List<Choice<T>> list1, List<Choice<T>> list2) {
 
   return Set.from(list1).containsAll(list2);
 }
+
+class ItemColor {
+  final Color? selected;
+  final Color? hovered;
+  final Color? unSelected;
+
+  ItemColor({
+    this.selected,
+    this.hovered,
+    this.unSelected,
+  });
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: multiselect_field
 description: "A flexible dropdown field supporting single/multiple selection modes, styles, titles, etc"
-version: 1.6.0
+version: 1.6.1
 homepage: https://github.com/JhonaCodes/multiselect_field.git
 
 environment: