Agent skill
flutter-forms
Flutter forms: validation, keyboard handling, multi-step forms, async validation. Use when building forms or handling user input.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/flutter-forms
SKILL.md
Flutter Forms
Basic Form
class EventForm extends StatefulWidget {
@override
State<EventForm> createState() => _EventFormState();
}
class _EventFormState extends State<EventForm> {
final _formKey = GlobalKey<FormState>();
final _titleController = TextEditingController();
@override
void dispose() {
_titleController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: TextFormField(
controller: _titleController,
validator: (v) => v!.isEmpty ? 'Required' : null,
textInputAction: TextInputAction.done,
),
);
}
}
Validation
// Sync
validator: (value) {
if (value == null || value.isEmpty) return 'Required';
if (value.length < 3) return 'Min 3 characters';
return null;
}
// Email
validator: (value) {
final regex = RegExp(r'^[^@]+@[^@]+\.[^@]+$');
if (!regex.hasMatch(value!)) return 'Invalid email';
return null;
}
Keyboard Handling
TextFormField(
textInputAction: TextInputAction.next,
onFieldSubmitted: (_) => FocusScope.of(context).nextFocus(),
)
TextFormField(
textInputAction: TextInputAction.done,
onFieldSubmitted: (_) => _submit(),
)
Keyboard Types
TextInputType.emailAddress
TextInputType.phone
TextInputType.number
TextInputType.multiline
Autofill
AutofillGroup(
child: Column(
children: [
TextFormField(autofillHints: [AutofillHints.email]),
TextFormField(autofillHints: [AutofillHints.password], obscureText: true),
],
),
)
Multi-Step Forms
Use Stepper widget with separate GlobalKey<FormState> for each step.
Related Skills
- flutter-ui-components: Widget patterns
- flutter-accessibility: Form accessibility
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?