Form Architecture with BLoC
SkillDev toolsUse when managing complex form state, synchronous and asynchronous input validation, or form submission transitions in BLoC.
Use Form Architecture with BLoC in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add Form Architecture with BLoC and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the Form Architecture with BLoC skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.
No other account needed.
Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.
What this skill tells your AI
The instructions your AI receives, as published by dhruvanbhalara/skills in skills/flutter/flutter-bloc-forms/SKILL.md and read by Ahel’s review.
- 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)
Signals
- GitHub stars
- 30
- Forks
- 4
- Last commit
- Aug 2026
Advanced
- Item type
- skill
- Key
flutter-bloc-forms- Source
- github.com/dhruvanbhalara/skills
github.com/dhruvanbhalara/skills
Related picks
Skill · evanca
The pick for Dartwrite-dart
Skill · cfug
The pick for Dartflutter-auto-route-navigation
Skill · hoangnguyen0403
The pick for Fluttererror-tracking-flutter
Skill · posthog
The pick for Flutterteach
Skill · mattpocock
More in Dev toolsimplement
Skill · mattpocock
More in Dev tools