AutovalidateMode.onUserInteraction in Flutter: Form Validation
Flutter AutovalidateMode.onUserInteraction example: build a complete signup form — validators, custom password rules, confirm-password matching, and gotchas.
Every real app has a signup screen, a login form, or a settings page — and every one of them needs validation. Flutter ships a complete validation toolkit in the framework itself: Form , GlobalKey<FormState> , and TextFormField validators. This guide takes you from the basics to custom validators, with a full Flutter AutovalidateMode.onUserInteraction example so errors appear exactly when they should — ending with a complete, runnable signup form you can drop into your own app. Why it matters Validation is your first line of defense against bad data. Without it, empty names, malformed emails, and mismatched passwords flow straight into your backend — or worse, into your Supabase database, where they become someone else's problem. Good validation also feels better: inline errors as the user types beat a rejected submit with no explanation. Flutter's approach is declarative and composable, so once you learn the pattern, it scales from one field to fifty. Step 1 — Wrap fields in a Form with a GlobalKey A Form groups fields together so you can validate and save them all at once. The GlobalKey<FormState> is how you reach the form's state from your button's onPressed — wrap your fields in a Form with this key: final _formKey = GlobalKey<FormState>(); // note the <FormState> type parameter // in your button: ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { // every field is valid — proceed } }, child: const Text('Submit'), ) _formKey.currentState!.validate() runs every field's validator and returns true only if all of them pass. The ! here is safe: currentState is non-null once the Form is built. Step 2 — Write validators: String? in, null means valid Every form field's validator follows one contract: return a String to report an error, return null when…