Merge pull request #1095 from flutter-form-builder-ecosystem/1078

[FormBuilderDropdown] Remove parameters related to InputDecoration
flutter-form-builder-ecosystem · Jul 30, 2022 · 0b9c8a4 · 0b9c8a4
2 parents e439e24 + 7fd2a2c
commit 0b9c8a4
Show file tree

Hide file tree

Showing 8 changed files with 122 additions and 100 deletions.
diff --git a/README.md b/README.md
@@ -8,6 +8,7 @@ Also included are common ready-made form input fields for FormBuilder. This give
 [![GitHub Workflow Status](https://img.shields.io/github/workflow/status/flutter-form-builder-ecosystem/flutter_form_builder/Base?logo=github&style=for-the-badge)](https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/actions/workflows/base.yaml)
 [![Codecov](https://img.shields.io/codecov/c/github/flutter-form-builder-ecosystem/flutter_form_builder?logo=codecov&style=for-the-badge)](https://codecov.io/gh/flutter-form-builder-ecosystem/flutter_form_builder/)
 [![CodeFactor Grade](https://img.shields.io/codefactor/grade/github/flutter-form-builder-ecosystem/flutter_form_builder?logo=codefactor&style=for-the-badge)](https://www.codefactor.io/repository/github/flutter-form-builder-ecosystem/flutter_form_builder)
+[![Discord](https://img.shields.io/discord/985922433578053673?logo=discord&style=for-the-badge)](https://discord.com/invite/25KNPMJQf2)
 ___
 
 - [Features](#features)
@@ -266,6 +267,57 @@ FormBuilderRadioGroup(
   ),
 ```
 
+#### Implement reset, clear or other button into FormBuilderField
+
+If you can add some button to reset specific field, can use the `decoration` parameter like this:
+
+```dart
+List<String> genderOptions = ['Male', 'Female', 'Other'];
+
+FormBuilderDropdown<String>(
+  name: 'gender',
+  decoration: InputDecoration(
+    labelText: 'Gender',
+    initialValue: 'Male',
+    suffix: IconButton(
+      icon: const Icon(Icons.close),
+      onPressed: () {
+        _formKey.currentState!.fields['gender']
+            ?.reset();
+      },
+    ),
+    hintText: 'Select Gender',
+  ),
+  items: genderOptions
+      .map((gender) => DropdownMenuItem(
+            alignment: AlignmentDirectional.center,
+            value: gender,
+            child: Text(gender),
+          ))
+      .toList(),
+),
+```
+
+Or if is allowed by the field, set a value like this:
+
+```dart
+FormBuilderTextField(
+  name: 'age',
+  decoration: InputDecoration(
+    labelText: 'Age',
+    suffixIcon: IconButton(
+      icon: const Icon(Icons.plus_one),
+      onPressed: () {
+        _formKey.currentState!.fields['age']
+            ?.didChange('14');
+      },
+    ),
+  ),
+  initialValue: '13',
+  keyboardType: TextInputType.number,
+),
+```
+
 ## Support
 
 ### Contribute

diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -206,10 +206,8 @@ class _CompleteFormState extends State<CompleteForm> {
                         suffix: _genderHasError
                             ? const Icon(Icons.error)
                             : const Icon(Icons.check),
+                        hintText: 'Select Gender',
                       ),
-                      // initialValue: 'Male',
-                      allowClear: true,
-                      hint: const Text('Select Gender'),
                       validator: FormBuilderValidators.compose(
                           [FormBuilderValidators.required()]),
                       items: genderOptions

diff --git a/example/lib/sources/complete_form.dart b/example/lib/sources/complete_form.dart
@@ -175,10 +175,9 @@ class _CompleteFormState extends State<CompleteForm> {
                       suffix: _genderHasError
                           ? const Icon(Icons.error)
                           : const Icon(Icons.check),
+                      hintText: 'Select Gender',
                     ),
                     // initialValue: 'Male',
-                    allowClear: true,
-                    hint: const Text('Select Gender'),
                     validator: FormBuilderValidators.compose(
                         [FormBuilderValidators.required()]),
                     items: genderOptions

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -190,5 +190,5 @@ packages:
     source: hosted
     version: "2.1.2"
 sdks:
-  dart: ">=2.17.0-206.0.dev <3.0.0"
+  dart: ">=2.17.0 <3.0.0"
   flutter: ">=3.0.0"
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
@@ -4,7 +4,8 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 version: 1.0.0+1
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
+  sdk: ">=2.17.0 <3.0.0"
+  flutter: ">=3.0.0"
 
 dependencies:
   cupertino_icons: any

diff --git a/lib/src/fields/form_builder_dropdown.dart b/lib/src/fields/form_builder_dropdown.dart
@@ -9,9 +9,10 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
   /// If the [onChanged] callback is null or the list of items is null
   /// then the dropdown button will be disabled, i.e. its arrow will be
   /// displayed in grey and it will not respond to input. A disabled button
-  /// will display the [disabledHint] widget if it is non-null. If
-  /// [disabledHint] is also null but [hint] is non-null, [hint] will instead
-  /// be displayed.
+  /// will display the [disabledHint] widget if it is non-null.
+  ///
+  /// If [decoration.hint] and variations is non-null and [disabledHint] is null,
+  /// the [decoration.hint] widget will be displayed instead.
   final List<DropdownMenuItem<T>> items;
 
   /// A placeholder widget that is displayed by the dropdown button.
@@ -23,8 +24,9 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
 
   /// A message to show when the dropdown is disabled.
   ///
-  /// Displayed if [items] or [onChanged] is null. If [hint] is non-null and
-  /// [disabledHint] is null, the [hint] widget will be displayed instead.
+  /// Displayed if [items] or [onChanged] is null. If [decoration.hint] and
+  /// variations is non-null and [disabledHint] is null, the [decoration.hint]
+  /// widget will be displayed instead.
   final Widget? disabledHint;
 
   /// Called when the dropdown button is tapped.
@@ -219,40 +221,42 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
 
   /// Defines the corner radii of the menu's rounded rectangle shape.
   ///
-  /// The radii of the first menu item's top left and right corners are
+  /// The radius of the first menu item's top left and right corners are
   /// defined by the corresponding properties of the [borderRadius].
   /// Similarly, the radii of the last menu item's bottom and right corners
   /// are defined by the corresponding properties of the [borderRadius].
   final BorderRadius? borderRadius;
 
   /// Creates field for Dropdown button
   FormBuilderDropdown({
-    Key? key,
-    //From Super
-    required String name,
-    FormFieldValidator<T>? validator,
-    T? initialValue,
-    InputDecoration decoration = const InputDecoration(),
-    ValueChanged<T?>? onChanged,
-    ValueTransformer<T?>? valueTransformer,
-    bool enabled = true,
-    FormFieldSetter<T>? onSaved,
-    AutovalidateMode autovalidateMode = AutovalidateMode.disabled,
-    VoidCallback? onReset,
-    FocusNode? focusNode,
+    super.key,
+    required super.name,
+    super.validator,
+    super.initialValue,
+    super.decoration,
+    super.onChanged,
+    super.valueTransformer,
+    super.enabled,
+    super.onSaved,
+    super.autovalidateMode = AutovalidateMode.disabled,
+    super.onReset,
+    super.focusNode,
     required this.items,
     this.isExpanded = true,
     this.isDense = true,
     this.elevation = 8,
     this.iconSize = 24.0,
-    this.hint,
+    @Deprecated('Please use decoration.hint and variations to set your desired label')
+        this.hint,
     this.style,
     this.disabledHint,
     this.icon,
     this.iconDisabledColor,
     this.iconEnabledColor,
-    this.allowClear = false,
-    this.clearIcon = const Icon(Icons.close),
+    @Deprecated('Please use decoration.suffix to set your desired behavior')
+        this.allowClear = false,
+    @Deprecated('Please use decoration.suffixIcon to set your desired icon')
+        this.clearIcon = const Icon(Icons.close),
     this.onTap,
     this.autofocus = false,
     this.shouldRequestFocus = false,
@@ -264,23 +268,9 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
     this.enableFeedback,
     this.borderRadius,
     this.alignment = AlignmentDirectional.centerStart,
-  }) : /*: assert(allowClear == true || clearIcon != null)*/ super(
-          key: key,
-          initialValue: initialValue,
-          name: name,
-          validator: validator,
-          valueTransformer: valueTransformer,
-          onChanged: onChanged,
-          autovalidateMode: autovalidateMode,
-          onSaved: onSaved,
-          enabled: enabled,
-          onReset: onReset,
-          decoration: decoration,
-          focusNode: focusNode,
+  }) : super(
           builder: (FormFieldState<T?> field) {
             final state = field as _FormBuilderDropdownState<T>;
-            // DropdownButtonFormField
-            // TextFormField
 
             void changeValue(T? value) {
               if (shouldRequestFocus) {
@@ -290,60 +280,42 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
             }
 
             return InputDecorator(
-              decoration: state.decoration.copyWith(
-                floatingLabelBehavior: hint == null
-                    ? decoration.floatingLabelBehavior
-                    : FloatingLabelBehavior.always,
-              ),
+              decoration: state.decoration,
               isEmpty: state.value == null,
-              child: Row(
-                children: <Widget>[
-                  Expanded(
-                    child: DropdownButtonHideUnderline(
-                      child: DropdownButton<T>(
-                        isExpanded: isExpanded,
-                        hint: hint,
-                        items: items,
-                        value: field.value,
-                        style: style,
-                        isDense: isDense,
-                        disabledHint: field.value != null
-                            ? (items
-                                    .firstWhereOrNull((dropDownItem) =>
-                                        dropDownItem.value == field.value)
-                                    ?.child ??
-                                Text(field.value.toString()))
-                            : disabledHint,
-                        elevation: elevation,
-                        iconSize: iconSize,
-                        icon: icon,
-                        iconDisabledColor: iconDisabledColor,
-                        iconEnabledColor: iconEnabledColor,
-                        onChanged: state.enabled
-                            ? (value) => changeValue(value)
-                            : null,
-                        onTap: onTap,
-                        focusNode: state.effectiveFocusNode,
-                        autofocus: autofocus,
-                        dropdownColor: dropdownColor,
-                        focusColor: focusColor,
-                        itemHeight: itemHeight,
-                        selectedItemBuilder: selectedItemBuilder,
-                        menuMaxHeight: menuMaxHeight,
-                        borderRadius: borderRadius,
-                        enableFeedback: enableFeedback,
-                        alignment: alignment,
-                      ),
-                    ),
-                  ),
-                  if (allowClear && state.enabled && field.value != null) ...[
-                    const VerticalDivider(),
-                    InkWell(
-                      onTap: () => changeValue(null),
-                      child: clearIcon,
-                    ),
-                  ]
-                ],
+              child: DropdownButtonHideUnderline(
+                child: DropdownButton<T>(
+                  isExpanded: isExpanded,
+                  hint: hint,
+                  items: items,
+                  value: field.value,
+                  style: style,
+                  isDense: isDense,
+                  disabledHint: field.value != null
+                      ? (items
+                              .firstWhereOrNull((dropDownItem) =>
+                                  dropDownItem.value == field.value)
+                              ?.child ??
+                          Text(field.value.toString()))
+                      : disabledHint,
+                  elevation: elevation,
+                  iconSize: iconSize,
+                  icon: icon,
+                  iconDisabledColor: iconDisabledColor,
+                  iconEnabledColor: iconEnabledColor,
+                  onChanged:
+                      state.enabled ? (value) => changeValue(value) : null,
+                  onTap: onTap,
+                  focusNode: state.effectiveFocusNode,
+                  autofocus: autofocus,
+                  dropdownColor: dropdownColor,
+                  focusColor: focusColor,
+                  itemHeight: itemHeight,
+                  selectedItemBuilder: selectedItemBuilder,
+                  menuMaxHeight: menuMaxHeight,
+                  borderRadius: borderRadius,
+                  enableFeedback: enableFeedback,
+                  alignment: alignment,
+                ),
               ),
             );
           },

diff --git a/pubspec.lock b/pubspec.lock
@@ -164,5 +164,5 @@ packages:
     source: hosted
     version: "2.1.2"
 sdks:
-  dart: ">=2.17.0-206.0.dev <3.0.0"
+  dart: ">=2.17.0 <3.0.0"
   flutter: ">=3.0.0"
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,11 +1,11 @@
 name: flutter_form_builder
 description: This package helps in creation of forms in Flutter by removing the boilerplate code, reusing validation, react to changes, and collect final user input.
 version: 7.5.0
-homepage: https://github.com/flutter-form-builder-ecosystem/flutter_form_builder
+repository: https://github.com/flutter-form-builder-ecosystem/flutter_form_builder
 issue_tracker: https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/issues
 
 environment:
-  sdk: ">=2.12.0 <3.0.0"
+  sdk: ">=2.17.0 <3.0.0"
   flutter: ">=3.0.0"
 
 dependencies: