flutter-bloc-forms
SKILL.md
Form Architecture with BLoC
- Manage form state in a dedicated
FormBloc— NOT in widgetsetState - 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,FormErrorstates for submission flow
Form Events
FieldChanged(field, value)— update a single field in stateFormSubmitted— trigger validation and submissionFormReset— clear all fields and errors
Form State
- Use a single state class with all field values, field-level errors, and form status:
sealed class FormStatus { initial, submitting, success, failure } - Field errors:
Map<String, String?>keyed by field name —nullmeans valid
Validation Patterns
- Validate in the domain layer — NOT in widgets or BLoCs
- Create pure validator functions that return
String?(null = valid, string = error message):String? validateEmail(String value) => value.contains('@') ? null : 'Invalid email'; - Compose validators:
String? validate(String v) => validateRequired(v) ?? validateEmail(v) - Use localized error messages via
context.l10n— no hardcoded validation strings
Input Widgets
- Use
TextFormFieldwithInputDecorationfor consistent styling - Always set
textInputActionfor proper keyboard behavior (next,done) - Always set
keyboardTypematching the field type (emailAddress,phone,number) - Use
inputFormattersto restrict input (e.g.,FilteringTextInputFormatter.digitsOnly) - Assign
Key('feature_fieldName')to every form field for test access - Use
AutofillHintsfor login/signup forms (email, password, name) - Wrap form fields with
FocusorFocusTraversalGroupfor proper tab order
Controller Lifecycle
- Declare
TextEditingControlleraslate finalininitState()— dispose indispose() - Sync controllers to BLoC via
onChangedcallback or controller listener
Form Submission
- Disable submit button while
FormStatus.submittingto 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
SnackBaror inline, keep form data intact
Common Form Patterns
- Search: Use
debouncetransformer 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)
Weekly Installs
27
Repository
dhruvanbhalara/skillsGitHub Stars
14
First Seen
14 days ago
Security Audits
Installed on
cursor27
gemini-cli27
amp27
cline27
github-copilot27
codex27