Skip to content

Commit

Permalink
feat: add all missing ChoiceChip properties
Browse files Browse the repository at this point in the history
Add additional properties from Flutter's ChoiceChip widget:
- autofocus
- avatarBoxConstraints
- chipAnimationStyle
- color
- iconTheme
- tooltip

Update documentation in both code and README

Fixes #1448
  • Loading branch information
ahmedmandur committed Dec 23, 2024
1 parent bae4075 commit 7e229f8
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 55 deletions.
112 changes: 57 additions & 55 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@ Also included are common ready-made form input fields for FormBuilder. This give
[![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)
[![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)
___

---

## Call for Maintainers

Expand Down Expand Up @@ -42,8 +43,8 @@ ___
- Apply validators to inputs fields
- React to form fields changes and validations

| Complete Form | Sign Up | Dynamic Fields | Conditional Form |
|---|---|---|---|
| Complete Form | Sign Up | Dynamic Fields | Conditional Form |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ![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) |

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

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:

| Attribute | Type | Default | Required | Description |
|-----------|-------|---------|-------------|----------|
| `name` | `String` | | `Yes` | This will form the key in the form value Map |
| `initialValue` | `T` | `null` | `No` | The initial value of the input field |
| `enabled` | `bool` | `true` | `No` | Determines whether the field widget will accept user input. |
| `decoration` | `InputDecoration` | `InputDecoration()` | `No` | Defines the border, labels, icons, and styles used to decorate the field. |
| `validator` | `FormFieldValidator<T>` | `null` | `No` | A `FormFieldValidator` that will check the validity of value in the `FormField` |
| `onChanged` | `ValueChanged<T>` | `null` | `No` | This event function will fire immediately the the field value changes |
| `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` |
| Attribute | Type | Default | Required | Description |
| ------------------ | ----------------------- | ------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | `String` | | `Yes` | This will form the key in the form value Map |
| `initialValue` | `T` | `null` | `No` | The initial value of the input field |
| `enabled` | `bool` | `true` | `No` | Determines whether the field widget will accept user input. |
| `decoration` | `InputDecoration` | `InputDecoration()` | `No` | Defines the border, labels, icons, and styles used to decorate the field. |
| `validator` | `FormFieldValidator<T>` | `null` | `No` | A `FormFieldValidator` that will check the validity of value in the `FormField` |
| `onChanged` | `ValueChanged<T>` | `null` | `No` | This event function will fire immediately the the field value changes |
| `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` |

The rest of the attributes will be determined by the type of Widget being used.

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

```dart
final _formKey = GlobalKey<FormBuilderState>();
```dart
final _formKey = GlobalKey<FormBuilderState>();
FormBuilder(
key: _formKey,
child: Column(
children: [
FormBuilderTextField(
key: _emailFieldKey,
name: 'email',
decoration: const InputDecoration(labelText: 'Email'),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(),
FormBuilderValidators.email(),
]),
),
const SizedBox(height: 10),
FormBuilderTextField(
name: 'password',
decoration: const InputDecoration(labelText: 'Password'),
obscureText: true,
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(),
]),
),
MaterialButton(
color: Theme.of(context).colorScheme.secondary,
onPressed: () {
// Validate and save the form values
_formKey.currentState?.saveAndValidate();
debugPrint(_formKey.currentState?.value.toString());
// On another side, can access all field values without saving form with instantValues
_formKey.currentState?.validate();
debugPrint(_formKey.currentState?.instantValue.toString());
},
child: const Text('Login'),
)
],
),
FormBuilder(
key: _formKey,
child: Column(
children: [
FormBuilderTextField(
key: _emailFieldKey,
name: 'email',
decoration: const InputDecoration(labelText: 'Email'),
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(),
FormBuilderValidators.email(),
]),
),
const SizedBox(height: 10),
FormBuilderTextField(
name: 'password',
decoration: const InputDecoration(labelText: 'Password'),
obscureText: true,
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(),
]),
),
MaterialButton(
color: Theme.of(context).colorScheme.secondary,
onPressed: () {
// Validate and save the form values
_formKey.currentState?.saveAndValidate();
debugPrint(_formKey.currentState?.value.toString());
// On another side, can access all field values without saving form with instantValues
_formKey.currentState?.validate();
debugPrint(_formKey.currentState?.instantValue.toString());
},
child: const Text('Login'),
)
],
),
```
),
```

#### Building your own custom field

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

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

### Questions and answers

Expand Down
64 changes: 64 additions & 0 deletions lib/src/fields/form_builder_choice_chips.dart
Original file line number Diff line number Diff line change
Expand Up @@ -283,14 +283,66 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
final bool showCheckmark;

/// The surface tint color of the chip when it is selected.
///
/// In Material 3, a surface tint is applied to cards and other surfaces to help
/// indicate elevation. This property allows customization of that tint color.
/// If null, [ThemeData.surfaceTintColor] is used.
///
/// See also:
/// * [Material.surfaceTintColor], which is used to implement the background
/// tint for elevated surfaces in Material 3.
final Color? surfaceTintColor;

/// {@macro flutter.material.Material.clipBehavior}
///
/// Defaults to [Clip.none].
///
/// This property can be used to clip the content of the chip when it overflows
/// its bounds. For example, if you have a long label text that doesn't fit
/// within the chip's bounds, setting this to [Clip.hardEdge] will clip the
/// overflowing text.
final Clip clipBehavior;

/// The color of the chip's check mark when selected.
///
/// If null, [ChipThemeData.checkmarkColor] is used. If that is also null,
/// [ColorScheme.primary] is used.
///
/// This color is used to indicate the selected state of the chip when
/// [showCheckmark] is true.
final Color? checkmarkColor;

/// {@macro flutter.widgets.Focus.autofocus}
final bool autofocus;

/// Constraints to be enforced on the avatar's box.
///
/// If null, the avatar will occupy the minimum necessary space.
final BoxConstraints? avatarBoxConstraints;

/// The style of the chip's animation when selected or deselected.
///
/// This property is only used if [selected] is non-null. If [selected] is
/// null, the chip cannot be selected and therefore cannot animate between
/// selected and deselected states.
final ChipAnimationStyle? chipAnimationStyle;

/// The color of the chip.
///
/// This color will be used for the background of the chip if [selected] is
/// false, or if [selected] is null and [onSelected] is null.
final WidgetStateProperty<Color?>? color;

/// The icon theme data for the icon.
///
/// This property can be used to style the icon in the chip.
final IconThemeData? iconTheme;

/// The tooltip message to show when long pressing on the chip.
///
/// If [tooltip] is an empty string, no tooltip will be shown.
final String? tooltip;

/// Creates a list of `Chip`s that acts like radio buttons
FormBuilderChoiceChip({
super.autovalidateMode = AutovalidateMode.disabled,
Expand Down Expand Up @@ -334,6 +386,12 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
this.surfaceTintColor,
this.clipBehavior = Clip.none,
this.checkmarkColor,
this.autofocus = false,
this.avatarBoxConstraints,
this.chipAnimationStyle,
this.color,
this.iconTheme,
this.tooltip,
}) : super(builder: (FormFieldState<T?> field) {
final state = field as _FormBuilderChoiceChipState<T>;

Expand Down Expand Up @@ -379,6 +437,12 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
surfaceTintColor: surfaceTintColor,
clipBehavior: clipBehavior,
checkmarkColor: checkmarkColor,
autofocus: autofocus,
avatarBoxConstraints: avatarBoxConstraints,
chipAnimationStyle: chipAnimationStyle,
color: color,
iconTheme: iconTheme,
tooltip: tooltip,
),
],
),
Expand Down

0 comments on commit 7e229f8

Please sign in to comment.