Skip to content

Commit 0b9c8a4

Browse files
deandreamatiasdeandreamatias
authored
Merge pull request #1095 from flutter-form-builder-ecosystem/1078
[FormBuilderDropdown] Remove parameters related to InputDecoration
2 parents e439e24 + 7fd2a2c commit 0b9c8a4

File tree

8 files changed

+122
-100
lines changed

8 files changed

+122
-100
lines changed

‎README.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ Also included are common ready-made form input fields for FormBuilder. This give
88
[![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)
99
[![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/)
1010
[![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)
11+
[![Discord](https://img.shields.io/discord/985922433578053673?logo=discord&style=for-the-badge)](https://discord.com/invite/25KNPMJQf2)
1112
___
1213

1314
- [Features](#features)
@@ -266,6 +267,57 @@ FormBuilderRadioGroup(
266267
),
267268
```
268269

270+
#### Implement reset, clear or other button into FormBuilderField
271+
272+
If you can add some button to reset specific field, can use the `decoration` parameter like this:
273+
274+
```dart
275+
List<String> genderOptions = ['Male', 'Female', 'Other'];
276+
277+
FormBuilderDropdown<String>(
278+
name: 'gender',
279+
decoration: InputDecoration(
280+
labelText: 'Gender',
281+
initialValue: 'Male',
282+
suffix: IconButton(
283+
icon: const Icon(Icons.close),
284+
onPressed: () {
285+
_formKey.currentState!.fields['gender']
286+
?.reset();
287+
},
288+
),
289+
hintText: 'Select Gender',
290+
),
291+
items: genderOptions
292+
.map((gender) => DropdownMenuItem(
293+
alignment: AlignmentDirectional.center,
294+
value: gender,
295+
child: Text(gender),
296+
))
297+
.toList(),
298+
),
299+
```
300+
301+
Or if is allowed by the field, set a value like this:
302+
303+
```dart
304+
FormBuilderTextField(
305+
name: 'age',
306+
decoration: InputDecoration(
307+
labelText: 'Age',
308+
suffixIcon: IconButton(
309+
icon: const Icon(Icons.plus_one),
310+
onPressed: () {
311+
_formKey.currentState!.fields['age']
312+
?.didChange('14');
313+
},
314+
),
315+
),
316+
initialValue: '13',
317+
keyboardType: TextInputType.number,
318+
),
319+
```
320+
269321
## Support
270322

271323
### Contribute

‎example/lib/main.dart

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -206,10 +206,8 @@ class _CompleteFormState extends State<CompleteForm> {
206206
suffix: _genderHasError
207207
? const Icon(Icons.error)
208208
: const Icon(Icons.check),
209+
hintText: 'Select Gender',
209210
),
210-
// initialValue: 'Male',
211-
allowClear: true,
212-
hint: const Text('Select Gender'),
213211
validator: FormBuilderValidators.compose(
214212
[FormBuilderValidators.required()]),
215213
items: genderOptions

‎example/lib/sources/complete_form.dart

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -175,10 +175,9 @@ class _CompleteFormState extends State<CompleteForm> {
175175
suffix: _genderHasError
176176
? const Icon(Icons.error)
177177
: const Icon(Icons.check),
178+
hintText: 'Select Gender',
178179
),
179180
// initialValue: 'Male',
180-
allowClear: true,
181-
hint: const Text('Select Gender'),
182181
validator: FormBuilderValidators.compose(
183182
[FormBuilderValidators.required()]),
184183
items: genderOptions

‎example/pubspec.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,5 +190,5 @@ packages:
190190
source: hosted
191191
version: "2.1.2"
192192
sdks:
193-
dart: ">=2.17.0-206.0.dev <3.0.0"
193+
dart: ">=2.17.0 <3.0.0"
194194
flutter: ">=3.0.0"

‎example/pubspec.yaml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
44
version: 1.0.0+1
55

66
environment:
7-
sdk: ">=2.12.0 <3.0.0"
7+
sdk: ">=2.17.0 <3.0.0"
8+
flutter: ">=3.0.0"
89

910
dependencies:
1011
cupertino_icons: any

‎lib/src/fields/form_builder_dropdown.dart

Lines changed: 62 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
99
/// If the [onChanged] callback is null or the list of items is null
1010
/// then the dropdown button will be disabled, i.e. its arrow will be
1111
/// displayed in grey and it will not respond to input. A disabled button
12-
/// will display the [disabledHint] widget if it is non-null. If
13-
/// [disabledHint] is also null but [hint] is non-null, [hint] will instead
14-
/// be displayed.
12+
/// will display the [disabledHint] widget if it is non-null.
13+
///
14+
/// If [decoration.hint] and variations is non-null and [disabledHint] is null,
15+
/// the [decoration.hint] widget will be displayed instead.
1516
final List<DropdownMenuItem<T>> items;
1617

1718
/// A placeholder widget that is displayed by the dropdown button.
@@ -23,8 +24,9 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
2324

2425
/// A message to show when the dropdown is disabled.
2526
///
26-
/// Displayed if [items] or [onChanged] is null. If [hint] is non-null and
27-
/// [disabledHint] is null, the [hint] widget will be displayed instead.
27+
/// Displayed if [items] or [onChanged] is null. If [decoration.hint] and
28+
/// variations is non-null and [disabledHint] is null, the [decoration.hint]
29+
/// widget will be displayed instead.
2830
final Widget? disabledHint;
2931

3032
/// Called when the dropdown button is tapped.
@@ -219,40 +221,42 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
219221

220222
/// Defines the corner radii of the menu's rounded rectangle shape.
221223
///
222-
/// The radii of the first menu item's top left and right corners are
224+
/// The radius of the first menu item's top left and right corners are
223225
/// defined by the corresponding properties of the [borderRadius].
224226
/// Similarly, the radii of the last menu item's bottom and right corners
225227
/// are defined by the corresponding properties of the [borderRadius].
226228
final BorderRadius? borderRadius;
227229

228230
/// Creates field for Dropdown button
229231
FormBuilderDropdown({
230-
Key? key,
231-
//From Super
232-
required String name,
233-
FormFieldValidator<T>? validator,
234-
T? initialValue,
235-
InputDecoration decoration = const InputDecoration(),
236-
ValueChanged<T?>? onChanged,
237-
ValueTransformer<T?>? valueTransformer,
238-
bool enabled = true,
239-
FormFieldSetter<T>? onSaved,
240-
AutovalidateMode autovalidateMode = AutovalidateMode.disabled,
241-
VoidCallback? onReset,
242-
FocusNode? focusNode,
232+
super.key,
233+
required super.name,
234+
super.validator,
235+
super.initialValue,
236+
super.decoration,
237+
super.onChanged,
238+
super.valueTransformer,
239+
super.enabled,
240+
super.onSaved,
241+
super.autovalidateMode = AutovalidateMode.disabled,
242+
super.onReset,
243+
super.focusNode,
243244
required this.items,
244245
this.isExpanded = true,
245246
this.isDense = true,
246247
this.elevation = 8,
247248
this.iconSize = 24.0,
248-
this.hint,
249+
@Deprecated('Please use decoration.hint and variations to set your desired label')
250+
this.hint,
249251
this.style,
250252
this.disabledHint,
251253
this.icon,
252254
this.iconDisabledColor,
253255
this.iconEnabledColor,
254-
this.allowClear = false,
255-
this.clearIcon = const Icon(Icons.close),
256+
@Deprecated('Please use decoration.suffix to set your desired behavior')
257+
this.allowClear = false,
258+
@Deprecated('Please use decoration.suffixIcon to set your desired icon')
259+
this.clearIcon = const Icon(Icons.close),
256260
this.onTap,
257261
this.autofocus = false,
258262
this.shouldRequestFocus = false,
@@ -264,23 +268,9 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
264268
this.enableFeedback,
265269
this.borderRadius,
266270
this.alignment = AlignmentDirectional.centerStart,
267-
}) : /*: assert(allowClear == true || clearIcon != null)*/ super(
268-
key: key,
269-
initialValue: initialValue,
270-
name: name,
271-
validator: validator,
272-
valueTransformer: valueTransformer,
273-
onChanged: onChanged,
274-
autovalidateMode: autovalidateMode,
275-
onSaved: onSaved,
276-
enabled: enabled,
277-
onReset: onReset,
278-
decoration: decoration,
279-
focusNode: focusNode,
271+
}) : super(
280272
builder: (FormFieldState<T?> field) {
281273
final state = field as _FormBuilderDropdownState<T>;
282-
// DropdownButtonFormField
283-
// TextFormField
284274

285275
void changeValue(T? value) {
286276
if (shouldRequestFocus) {
@@ -290,60 +280,42 @@ class FormBuilderDropdown<T> extends FormBuilderField<T> {
290280
}
291281

292282
return InputDecorator(
293-
decoration: state.decoration.copyWith(
294-
floatingLabelBehavior: hint == null
295-
? decoration.floatingLabelBehavior
296-
: FloatingLabelBehavior.always,
297-
),
283+
decoration: state.decoration,
298284
isEmpty: state.value == null,
299-
child: Row(
300-
children: <Widget>[
301-
Expanded(
302-
child: DropdownButtonHideUnderline(
303-
child: DropdownButton<T>(
304-
isExpanded: isExpanded,
305-
hint: hint,
306-
items: items,
307-
value: field.value,
308-
style: style,
309-
isDense: isDense,
310-
disabledHint: field.value != null
311-
? (items
312-
.firstWhereOrNull((dropDownItem) =>
313-
dropDownItem.value == field.value)
314-
?.child ??
315-
Text(field.value.toString()))
316-
: disabledHint,
317-
elevation: elevation,
318-
iconSize: iconSize,
319-
icon: icon,
320-
iconDisabledColor: iconDisabledColor,
321-
iconEnabledColor: iconEnabledColor,
322-
onChanged: state.enabled
323-
? (value) => changeValue(value)
324-
: null,
325-
onTap: onTap,
326-
focusNode: state.effectiveFocusNode,
327-
autofocus: autofocus,
328-
dropdownColor: dropdownColor,
329-
focusColor: focusColor,
330-
itemHeight: itemHeight,
331-
selectedItemBuilder: selectedItemBuilder,
332-
menuMaxHeight: menuMaxHeight,
333-
borderRadius: borderRadius,
334-
enableFeedback: enableFeedback,
335-
alignment: alignment,
336-
),
337-
),
338-
),
339-
if (allowClear && state.enabled && field.value != null) ...[
340-
const VerticalDivider(),
341-
InkWell(
342-
onTap: () => changeValue(null),
343-
child: clearIcon,
344-
),
345-
]
346-
],
285+
child: DropdownButtonHideUnderline(
286+
child: DropdownButton<T>(
287+
isExpanded: isExpanded,
288+
hint: hint,
289+
items: items,
290+
value: field.value,
291+
style: style,
292+
isDense: isDense,
293+
disabledHint: field.value != null
294+
? (items
295+
.firstWhereOrNull((dropDownItem) =>
296+
dropDownItem.value == field.value)
297+
?.child ??
298+
Text(field.value.toString()))
299+
: disabledHint,
300+
elevation: elevation,
301+
iconSize: iconSize,
302+
icon: icon,
303+
iconDisabledColor: iconDisabledColor,
304+
iconEnabledColor: iconEnabledColor,
305+
onChanged:
306+
state.enabled ? (value) => changeValue(value) : null,
307+
onTap: onTap,
308+
focusNode: state.effectiveFocusNode,
309+
autofocus: autofocus,
310+
dropdownColor: dropdownColor,
311+
focusColor: focusColor,
312+
itemHeight: itemHeight,
313+
selectedItemBuilder: selectedItemBuilder,
314+
menuMaxHeight: menuMaxHeight,
315+
borderRadius: borderRadius,
316+
enableFeedback: enableFeedback,
317+
alignment: alignment,
318+
),
347319
),
348320
);
349321
},

‎pubspec.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,5 +164,5 @@ packages:
164164
source: hosted
165165
version: "2.1.2"
166166
sdks:
167-
dart: ">=2.17.0-206.0.dev <3.0.0"
167+
dart: ">=2.17.0 <3.0.0"
168168
flutter: ">=3.0.0"

‎pubspec.yaml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
name: flutter_form_builder
22
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.
33
version: 7.5.0
4-
homepage: https://github.com/flutter-form-builder-ecosystem/flutter_form_builder
4+
repository: https://github.com/flutter-form-builder-ecosystem/flutter_form_builder
55
issue_tracker: https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/issues
66

77
environment:
8-
sdk: ">=2.12.0 <3.0.0"
8+
sdk: ">=2.17.0 <3.0.0"
99
flutter: ">=3.0.0"
1010

1111
dependencies:

0 commit comments

Comments
 (0)