flutter-form-builder-ecosystem / flutter-form-builder-ecosystem/flutter_form_builder
[FormBuilderCheckbox]: Support error styling
- Dominant language
- Dart
- Stars
- 1.6k
- Forks
- 561
- PR merge metrics
- No merged PRs in 30d
Description
### Is there an existing issue for this?
- [x] I have searched the existing issues
### Package/Plugin version
10.2.0
### What you'd like to happen
I'd like my checkbox to be red when the field has an error.
I have declared:
```dart
FormBuilderCheckbox(
name: 'consent',
side: WidgetStateBorderSide.resolveWith((states) {
if (states.contains(WidgetState.error)) {
return BorderSide(color: Colors.red);
}
return null;
}),
title: Text('I have read the Terms & Conditions.'),
validator: (value) => value != true ? 'Please check above checkbox to proceed' : null,
),
```
Unfortunately it doesn't work because the Checkbox is never told to be "in error". So, in my snippet above, `states` never contains `WidgetState.error`. It can be solved with a one-liner, we just have to forward the property `hasError` to the CheckboxListTile constructor:
See https://github.com/flutter-form-builder-ecosystem/flutter_form_builder/compare/main...ncuillery:flutter_form_builder:patch-1
Without the change|With the change
----------|------------
|
Would have accept a PR with this change?
### Alternatives you've considered
_No response_
### Aditional information
The problem would also be fixed when using the Material theme instead of the explicit `side` property. Like this:
```dart
Theme(
data: ThemeData(
checkboxTheme: CheckboxThemeData(
side: WidgetStateBorderSide.resolveWith(
(states) {
if (states.contains(WidgetState.error)) {
return BorderSide(color: Colors.red);
}
return null;
},
),
),
),
child: FormBuilderCheckbox(
name: 'consent',
title: Text('I have read the Terms & Conditions.'),
validator: (value) => value != true ? 'Please check above checkbox to proceed' : null,
),
),
```
Contributor guide
Assessment
This issue has not been assessed yet.