New label attribute

JhonaCodes · Nov 13, 2024 · 9f89dae · 9f89dae
1 parent 64f706a
commit 9f89dae
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 1.5.2
+- Attribute label text.
+
 ## 1.5.1
 - Format.
 

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.5.1
+  multiselect_field: ^1.5.2
 ```
 
 Then, install the dependencies using:

diff --git a/lib/core/multi_select.dart b/lib/core/multi_select.dart
@@ -109,32 +109,38 @@ class MultiSelectField<T> extends StatefulWidget {
   final TextStyle? titleMenuStyle;
   final TextStyle? itemMenuStyle;
 
-  const MultiSelectField(
-      {super.key,
-      required this.data,
-      required this.onSelect,
-      this.title,
-      this.defaultData,
-      this.useTextFilter = false,
-      this.decoration,
-      this.singleSelection = false,
-      this.menuHeightBaseOnContent = false,
-      this.menuWidthBaseOnContent = false,
-      this.itemMenuButton,
-      this.buttonStyle,
-      this.iconLeft,
-      this.iconRight,
-      this.menuStyle,
-      this.menuHeight,
-      this.menuWidth,
-      this.footer,
-      this.multiSelectWidget,
-      this.singleSelectWidget,
-      this.isMandatory = false,
-      this.itemMenuStyle,
-      this.titleMenuStyle,
-      this.textStyleSingleSelection,
-      this.cleanCurrentSelection = false});
+  final String? label;
+  final TextStyle? textStyleLabel;
+
+  const MultiSelectField({
+    super.key,
+    required this.data,
+    required this.onSelect,
+    this.title,
+    this.defaultData,
+    this.useTextFilter = false,
+    this.decoration,
+    this.singleSelection = false,
+    this.menuHeightBaseOnContent = false,
+    this.menuWidthBaseOnContent = false,
+    this.itemMenuButton,
+    this.buttonStyle,
+    this.iconLeft,
+    this.iconRight,
+    this.menuStyle,
+    this.menuHeight,
+    this.menuWidth,
+    this.footer,
+    this.multiSelectWidget,
+    this.singleSelectWidget,
+    this.isMandatory = false,
+    this.itemMenuStyle,
+    this.titleMenuStyle,
+    this.textStyleSingleSelection,
+    this.cleanCurrentSelection = false,
+    this.label,
+    this.textStyleLabel,
+  });
 
   @override
   State<MultiSelectField<T>> createState() => _MultiSelectFieldState<T>();
@@ -320,6 +326,13 @@ class _MultiSelectFieldState<T> extends State<MultiSelectField<T>>
                             spacing: 7,
                             runSpacing: _isMobile ? 0 : 7,
                             children: [
+                              if (_selectedChoice.isEmpty &&
+                                  !widget.useTextFilter &&
+                                  widget.label != null)
+                                Text(
+                                  widget.label!,
+                                  style: widget.textStyleLabel,
+                                ),
                               if (_selectedChoice.isNotEmpty)
                                 ..._selectedChoice.map(
                                   (element) {
@@ -351,6 +364,8 @@ class _MultiSelectFieldState<T> extends State<MultiSelectField<T>>
                                   textController: _textController,
                                   focusNodeTextField: _focusNodeTextField,
                                   isMobile: _isMobile,
+                                  label: widget.label,
+                                  textStyleLabel: widget.textStyleLabel,
                                   onTap: () {
                                     if (!val.isOpen) val.open();
                                   },

diff --git a/lib/core/search_multiselect_field.dart b/lib/core/search_multiselect_field.dart
@@ -45,6 +45,9 @@ final class SearchMultiselectField extends StatelessWidget {
   /// Callback function that handles changes in the search input.
   final void Function(String value) onChange;
 
+  final String? label;
+  final TextStyle? textStyleLabel;
+
   /// Creates a [SearchMultiselectField] widget.
   ///
   /// The [textController], [isMobile], [onTap], [focusNodeTextField], and [onChange] parameters are required.
@@ -55,6 +58,8 @@ final class SearchMultiselectField extends StatelessWidget {
     required this.onTap,
     required this.focusNodeTextField,
     required this.onChange,
+    this.label,
+    this.textStyleLabel,
   });
 
   @override
@@ -66,6 +71,7 @@ final class SearchMultiselectField extends StatelessWidget {
       ),
       child: SearchBar(
         controller: textController,
+        hintText: label,
         padding:
             const WidgetStatePropertyAll<EdgeInsetsGeometry>(EdgeInsets.zero),
         elevation: const WidgetStatePropertyAll<double>(0),
@@ -89,11 +95,11 @@ final class SearchMultiselectField extends StatelessWidget {
             const WidgetStatePropertyAll<Color>(Colors.transparent),
         shadowColor: const WidgetStatePropertyAll<Color>(Colors.transparent),
         overlayColor: const WidgetStatePropertyAll<Color>(Colors.transparent),
-        hintStyle: const WidgetStatePropertyAll<TextStyle>(
-          TextStyle(
-            color: Colors.transparent,
-            decoration: TextDecoration.none,
-          ),
+        hintStyle: WidgetStatePropertyAll<TextStyle>(
+          textStyleLabel ??
+              const TextStyle(
+                decoration: TextDecoration.none,
+              ),
         ),
         onTap: onTap,
         onChanged: onChange,

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,7 +1,7 @@
 name: multiselect_field
-description: "A class for multiple select fields that allows users to select multiple elements from a list"
-version: 1.5.1
-homepage: https://github.com/JhonaCodes/multiselect_field
+description: "A flexible dropdown field supporting single/multiple selection modes, styles, titles, etc"
+version: 1.5.2
+homepage: https://github.com/JhonaCodes/multiselect_field.git
 
 environment:
   sdk: ^3.5.1

diff --git a/test/goldens/ci/default_label.png b/test/goldens/ci/default_label.png
diff --git a/test/goldens/macos/default_label.png b/test/goldens/macos/default_label.png
diff --git a/test/multiselect_field_test.dart b/test/multiselect_field_test.dart
@@ -178,4 +178,59 @@ void main() {
       ),
     );
   });
+
+
+  group('GOLDEN_TEST_LABEL', () {
+    goldenTest(
+      'Default label',
+      fileName: 'default_label',
+      builder: () => GoldenTestGroup(
+        scenarioConstraints: constraint,
+        children: [
+          GoldenTestScenario(
+            name: "Default text",
+            child: SizedBox(
+              width: 300,
+              height: 70,
+              child: MultiSelectField(
+                decoration: decoration,
+                label: "Label text",
+                data: () => [],
+                onSelect: (value, isFromDefault) {},
+              ),
+            ),
+          ),
+          GoldenTestScenario(
+            name: "Label on Filter by text",
+            child: SizedBox(
+              width: 300,
+              height: 70,
+              child: MultiSelectField(
+                decoration: decoration,
+                singleSelection: true,
+                useTextFilter: true,
+                label: "Label on text filter",
+                data: () => [],
+                onSelect: (value, isFromDefault) {},
+              ),
+            ),
+          ),
+          GoldenTestScenario(
+            name: "Label with default data",
+            child: SizedBox(
+              width: 300,
+              height: 70,
+              child: MultiSelectField(
+                decoration: decoration,
+                label: "Label with default data",
+                defaultData: [Choice('1', 'Item1'), Choice('2', 'Item2')],
+                data: () => [],
+                onSelect: (value, isFromDefault) {},
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  });
 }