Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
79 changes: 79 additions & 0 deletions lib/src/fields/form_builder_choice_chips.dart
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,67 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
/// indicate its selection status. If set to `false`, no checkmark will be shown.
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 @@ -322,6 +383,15 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
this.verticalDirection = VerticalDirection.down,
this.visualDensity,
this.showCheckmark = true,
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 @@ -364,6 +434,15 @@ class FormBuilderChoiceChip<T> extends FormBuilderFieldDecoration<T> {
visualDensity: visualDensity,
avatarBorder: avatarBorder,
showCheckmark: showCheckmark,
surfaceTintColor: surfaceTintColor,
clipBehavior: clipBehavior,
checkmarkColor: checkmarkColor,
autofocus: autofocus,
avatarBoxConstraints: avatarBoxConstraints,
chipAnimationStyle: chipAnimationStyle,
color: color,
iconTheme: iconTheme,
tooltip: tooltip,
),
],
),
Expand Down
Loading