Skip to content

[FormBuilderCheckbox]: Support error styling #1503

@ncuillery

Description

@ncuillery

Is there an existing issue for this?

  • 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:

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 main...ncuillery:flutter_form_builder:patch-1

Without the change With the change
Image Image

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:

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,
  ),
),

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    Status

    Ready

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions