Skip to content

Commit 1c9acc8

Browse files
deandreamatiasdeandreamatias
authored
Merge pull request #1449 from ahmedmandur/feature/add-missing-choicechip-properties
feat: #1448 add missing ChoiceChip properties
2 parents 08ccbc9 + 7e229f8 commit 1c9acc8

File tree

2 files changed

+136
-55
lines changed

2 files changed

+136
-55
lines changed

‎README.md

Lines changed: 57 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ Also included are common ready-made form input fields for FormBuilder. This give
88
[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/flutter-form-builder-ecosystem/flutter_form_builder/base.yaml?branch=main&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-
___
11+
12+
---
1213

1314
## Call for Maintainers
1415

@@ -42,8 +43,8 @@ ___
4243
- Apply validators to inputs fields
4344
- React to form fields changes and validations
4445

45-
| Complete Form | Sign Up | Dynamic Fields | Conditional Form |
46-
|---|---|---|---|
46+
| Complete Form | Sign Up | Dynamic Fields | Conditional Form |
47+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4748
| ![Gif demostration with all fields](https://raw.githubusercontent.com/flutter-form-builder-ecosystem/flutter_form_builder/main/screenshots/complete_form.gif) | ![Gif demostration sign up form](https://raw.githubusercontent.com/flutter-form-builder-ecosystem/flutter_form_builder/main/screenshots/signup.gif) | ![Gif demostration dynamic fields](https://raw.githubusercontent.com/flutter-form-builder-ecosystem/flutter_form_builder/main/screenshots/dynamic_fields.gif) | ![Gif demostration conditional fields](https://raw.githubusercontent.com/flutter-form-builder-ecosystem/flutter_form_builder/main/screenshots/conditional_fields.gif) |
4849

4950
## Inputs
@@ -67,15 +68,16 @@ The currently supported fields include:
6768

6869
In order to create an input field in the form, along with the label, and any applicable validation, there are several attributes that are supported by all types of inputs namely:
6970

70-
| Attribute | Type | Default | Required | Description |
71-
|-----------|-------|---------|-------------|----------|
72-
| `name` | `String` | | `Yes` | This will form the key in the form value Map |
73-
| `initialValue` | `T` | `null` | `No` | The initial value of the input field |
74-
| `enabled` | `bool` | `true` | `No` | Determines whether the field widget will accept user input. |
75-
| `decoration` | `InputDecoration` | `InputDecoration()` | `No` | Defines the border, labels, icons, and styles used to decorate the field. |
76-
| `validator` | `FormFieldValidator<T>` | `null` | `No` | A `FormFieldValidator` that will check the validity of value in the `FormField` |
77-
| `onChanged` | `ValueChanged<T>` | `null` | `No` | This event function will fire immediately the the field value changes |
78-
| `valueTransformer` | `ValueTransformer<T>` | `null` | `No` | Function that transforms field value before saving to form value. e.g. transform TextField value for numeric field from `String` to `num` |
71+
| Attribute | Type | Default | Required | Description |
72+
| ------------------ | ----------------------- | ------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
73+
| `name` | `String` | | `Yes` | This will form the key in the form value Map |
74+
| `initialValue` | `T` | `null` | `No` | The initial value of the input field |
75+
| `enabled` | `bool` | `true` | `No` | Determines whether the field widget will accept user input. |
76+
| `decoration` | `InputDecoration` | `InputDecoration()` | `No` | Defines the border, labels, icons, and styles used to decorate the field. |
77+
| `validator` | `FormFieldValidator<T>` | `null` | `No` | A `FormFieldValidator` that will check the validity of value in the `FormField` |
78+
| `onChanged` | `ValueChanged<T>` | `null` | `No` | This event function will fire immediately the the field value changes |
79+
| `valueTransformer` | `ValueTransformer<T>` | `null` | `No` | Function that transforms field value before saving to form value. e.g. transform TextField value for numeric field from `String` to `num` |
80+
7981
The rest of the attributes will be determined by the type of Widget being used.
8082

8183
## Use
@@ -109,48 +111,48 @@ See [pub.dev example tab](https://pub.dev/packages/flutter_form_builder/example)
109111
Note: Validators are in a separate package
110112
([form_builder_validators](https://pub.dev/packages/form_builder_validators)).
111113

112-
```dart
113-
final _formKey = GlobalKey<FormBuilderState>();
114+
```dart
115+
final _formKey = GlobalKey<FormBuilderState>();
114116
115-
FormBuilder(
116-
key: _formKey,
117-
child: Column(
118-
children: [
119-
FormBuilderTextField(
120-
key: _emailFieldKey,
121-
name: 'email',
122-
decoration: const InputDecoration(labelText: 'Email'),
123-
validator: FormBuilderValidators.compose([
124-
FormBuilderValidators.required(),
125-
FormBuilderValidators.email(),
126-
]),
127-
),
128-
const SizedBox(height: 10),
129-
FormBuilderTextField(
130-
name: 'password',
131-
decoration: const InputDecoration(labelText: 'Password'),
132-
obscureText: true,
133-
validator: FormBuilderValidators.compose([
134-
FormBuilderValidators.required(),
135-
]),
136-
),
137-
MaterialButton(
138-
color: Theme.of(context).colorScheme.secondary,
139-
onPressed: () {
140-
// Validate and save the form values
141-
_formKey.currentState?.saveAndValidate();
142-
debugPrint(_formKey.currentState?.value.toString());
143-
144-
// On another side, can access all field values without saving form with instantValues
145-
_formKey.currentState?.validate();
146-
debugPrint(_formKey.currentState?.instantValue.toString());
147-
},
148-
child: const Text('Login'),
149-
)
150-
],
151-
),
117+
FormBuilder(
118+
key: _formKey,
119+
child: Column(
120+
children: [
121+
FormBuilderTextField(
122+
key: _emailFieldKey,
123+
name: 'email',
124+
decoration: const InputDecoration(labelText: 'Email'),
125+
validator: FormBuilderValidators.compose([
126+
FormBuilderValidators.required(),
127+
FormBuilderValidators.email(),
128+
]),
129+
),
130+
const SizedBox(height: 10),
131+
FormBuilderTextField(
132+
name: 'password',
133+
decoration: const InputDecoration(labelText: 'Password'),
134+
obscureText: true,
135+
validator: FormBuilderValidators.compose([
136+
FormBuilderValidators.required(),
137+
]),
138+
),
139+
MaterialButton(
140+
color: Theme.of(context).colorScheme.secondary,
141+
onPressed: () {
142+
// Validate and save the form values
143+
_formKey.currentState?.saveAndValidate();
144+
debugPrint(_formKey.currentState?.value.toString());
145+
146+
// On another side, can access all field values without saving form with instantValues
147+
_formKey.currentState?.validate();
148+
debugPrint(_formKey.currentState?.instantValue.toString());
149+
},
150+
child: const Text('Login'),
151+
)
152+
],
152153
),
153-
```
154+
),
155+
```
154156

155157
#### Building your own custom field
156158

@@ -210,8 +212,8 @@ _formKey.currentState.patchValue({
210212
'rate': 4,
211213
'chips_test': [
212214
Contact(
213-
'Andrew',
214-
'[email protected]',
215+
'Andrew',
216+
'[email protected]',
215217
'https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX4057996.jpg',
216218
),
217219
],
@@ -415,7 +417,7 @@ You have some ways to contribute to this packages
415417
- Intermediate: Implement new features (from issues or not) and created pull requests
416418
- Advanced: Join to [organization](#ecosystem) like a member and help coding, manage issues, dicuss new features and other things
417419

418-
See [contribution file](https://github.com/flutter-form-builder-ecosystem/.github/blob/main/CONTRIBUTING.md) for more details
420+
See [contribution file](https://github.com/flutter-form-builder-ecosystem/.github/blob/main/CONTRIBUTING.md) for more details
419421

420422
### Questions and answers
421423

‎lib/src/fields/form_builder_choice_chips.dart

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -282,6 +282,67 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
282282
/// indicate its selection status. If set to `false`, no checkmark will be shown.
283283
final bool showCheckmark;
284284

285+
/// The surface tint color of the chip when it is selected.
286+
///
287+
/// In Material 3, a surface tint is applied to cards and other surfaces to help
288+
/// indicate elevation. This property allows customization of that tint color.
289+
/// If null, [ThemeData.surfaceTintColor] is used.
290+
///
291+
/// See also:
292+
/// * [Material.surfaceTintColor], which is used to implement the background
293+
/// tint for elevated surfaces in Material 3.
294+
final Color? surfaceTintColor;
295+
296+
/// {@macro flutter.material.Material.clipBehavior}
297+
///
298+
/// Defaults to [Clip.none].
299+
///
300+
/// This property can be used to clip the content of the chip when it overflows
301+
/// its bounds. For example, if you have a long label text that doesn't fit
302+
/// within the chip's bounds, setting this to [Clip.hardEdge] will clip the
303+
/// overflowing text.
304+
final Clip clipBehavior;
305+
306+
/// The color of the chip's check mark when selected.
307+
///
308+
/// If null, [ChipThemeData.checkmarkColor] is used. If that is also null,
309+
/// [ColorScheme.primary] is used.
310+
///
311+
/// This color is used to indicate the selected state of the chip when
312+
/// [showCheckmark] is true.
313+
final Color? checkmarkColor;
314+
315+
/// {@macro flutter.widgets.Focus.autofocus}
316+
final bool autofocus;
317+
318+
/// Constraints to be enforced on the avatar's box.
319+
///
320+
/// If null, the avatar will occupy the minimum necessary space.
321+
final BoxConstraints? avatarBoxConstraints;
322+
323+
/// The style of the chip's animation when selected or deselected.
324+
///
325+
/// This property is only used if [selected] is non-null. If [selected] is
326+
/// null, the chip cannot be selected and therefore cannot animate between
327+
/// selected and deselected states.
328+
final ChipAnimationStyle? chipAnimationStyle;
329+
330+
/// The color of the chip.
331+
///
332+
/// This color will be used for the background of the chip if [selected] is
333+
/// false, or if [selected] is null and [onSelected] is null.
334+
final WidgetStateProperty<Color?>? color;
335+
336+
/// The icon theme data for the icon.
337+
///
338+
/// This property can be used to style the icon in the chip.
339+
final IconThemeData? iconTheme;
340+
341+
/// The tooltip message to show when long pressing on the chip.
342+
///
343+
/// If [tooltip] is an empty string, no tooltip will be shown.
344+
final String? tooltip;
345+
285346
/// Creates a list of `Chip`s that acts like radio buttons
286347
FormBuilderChoiceChip({
287348
super.autovalidateMode = AutovalidateMode.disabled,
@@ -322,6 +383,15 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
322383
this.verticalDirection = VerticalDirection.down,
323384
this.visualDensity,
324385
this.showCheckmark = true,
386+
this.surfaceTintColor,
387+
this.clipBehavior = Clip.none,
388+
this.checkmarkColor,
389+
this.autofocus = false,
390+
this.avatarBoxConstraints,
391+
this.chipAnimationStyle,
392+
this.color,
393+
this.iconTheme,
394+
this.tooltip,
325395
}) : super(builder: (FormFieldState<T?> field) {
326396
final state = field as _FormBuilderChoiceChipState<T>;
327397

@@ -364,6 +434,15 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
364434
visualDensity: visualDensity,
365435
avatarBorder: avatarBorder,
366436
showCheckmark: showCheckmark,
437+
surfaceTintColor: surfaceTintColor,
438+
clipBehavior: clipBehavior,
439+
checkmarkColor: checkmarkColor,
440+
autofocus: autofocus,
441+
avatarBoxConstraints: avatarBoxConstraints,
442+
chipAnimationStyle: chipAnimationStyle,
443+
color: color,
444+
iconTheme: iconTheme,
445+
tooltip: tooltip,
367446
),
368447
],
369448
),

0 commit comments

Comments
 (0)