flutter
dart
npx skills add dhruvanbhalara/skills --skill flutter-bloc-forms
- Manage form state in a dedicated
FormBloc — NOT in widget setState
- Each form field maps to a property in the BLoC state
- Validate on field change (real-time) or on submit (batch) depending on UX requirements
- Emit
FormSubmitting, FormSuccess, FormError states for submission flow
FieldChanged(field, value) — update a single field in state
FormSubmitted — trigger validation and submission
FormReset — clear all fields and errors
Validation Patterns
- Use
TextFormField with InputDecoration for consistent styling
- Always set
textInputAction for proper keyboard behavior (next, done)
- Always set
keyboardType matching the field type (emailAddress, phone, number)
- Use
inputFormatters to restrict input (e.g., FilteringTextInputFormatter.digitsOnly)
- Assign
Key('feature_fieldName') to every form field for test access
- Use
AutofillHints for login/signup forms (email, password, name)
- Wrap form fields with
Focus or FocusTraversalGroup for proper tab order
Controller Lifecycle
- Declare
TextEditingController as late final in initState() — dispose in dispose()
- Sync controllers to BLoC via
onChanged callback or controller listener
- Disable submit button while
FormStatus.submitting to prevent double-submission
- Show inline field errors below each field — not just a top-level error
- On success: navigate, show success feedback, and reset form if staying on same page
- On failure: show error feedback via
SnackBar or inline, keep form data intact
- Search: Use
debounce transformer on search events (300-500ms delay)
- Multi-step: Each step is a separate form state within one
FormBloc, validated independently
- Dependent fields: Update dependent field options in
on<FieldChanged> handler (e.g., country → city)