Form Architecture with BLoC

SkillDev tools

Use 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.

Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Form Architecture with BLoCStart free

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

Form Events

  • FieldChanged(field, value): update a single field in state
  • FormSubmitted: trigger validation and submission
  • FormReset: 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 (null means 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 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

Form Submission

  • 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

Common Form Patterns

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

Signals

GitHub stars
30
Forks
4
Last commit
Aug 2026
Advanced
Item type
skill
Key
flutter-bloc-forms
Source
github.com/dhruvanbhalara/skills