flutter-form

Flutter Form Validation Goal Implements stateful form validation in Flutter using Form , TextFormField , and GlobalKey . Manages validation state efficiently without unnecessary key regeneration and handles user input validation workflows. Assumes a pre-existing Flutter environment with Material Design dependencies available. Decision Logic When implementing form validation, follow this decision tree to determine the flow of state and UI updates: User triggers submit action: Call _formKey.currentState!.validate() . Does validate() return true ? Yes (Valid): Proceed with data processing (e.g., API call, local storage). Trigger success UI feedback (e.g., SnackBar , navigation). No (Invalid): The FormState automatically rebuilds the TextFormField widgets to display the String error messages returned by their respective validator functions. Halt submission. Instructions Initialize the Stateful Form Container Create a StatefulWidget to hold the form. Instantiate a GlobalKey exactly once within the State class to prevent resource-expensive key regeneration during build cycles. import 'package:flutter/material.dart' ; class CustomValidatedForm extends StatefulWidget { const CustomValidatedForm ( { super . key } ) ; @override State < CustomValidatedForm

createState ( ) =

_CustomValidatedFormState ( ) ; } class _CustomValidatedFormState extends State < CustomValidatedForm

{ // Instantiate the GlobalKey once in the State object final _formKey = GlobalKey < FormState

( ) ; @override Widget build ( BuildContext context ) { return Form ( key : _formKey , child : Column ( crossAxisAlignment : CrossAxisAlignment . start , children : < Widget

[ // Form fields will be injected here ] , ) , ) ; } } Implement TextFormFields with Validation Logic Inject TextFormField widgets into the Form 's widget tree. Provide a validator function for each field. TextFormField ( decoration : const InputDecoration ( hintText : 'Enter your email' , labelText : 'Email' , ) , validator : ( String ? value ) { if ( value == null || value . isEmpty ) { return 'Please enter an email address' ; } if ( ! value . contains ( '@' ) ) { return 'Please enter a valid email address' ; } // Return null if the input is valid return null ; } , onSaved : ( String ? value ) { // Handle save logic here } , ) Implement the Submit Action and Validation Trigger Create a button that accesses the FormState via the GlobalKey to trigger validation. Padding ( padding : const EdgeInsets . symmetric ( vertical : 16.0 ) , child : ElevatedButton ( onPressed : ( ) { // Validate returns true if the form is valid, or false otherwise. if ( _formKey . currentState ! . validate ( ) ) { // Save the form fields if necessary _formKey . currentState ! . save ( ) ; // Provide success feedback ScaffoldMessenger . of ( context ) . showSnackBar ( const SnackBar ( content : Text ( 'Processing Data' ) ) , ) ; } } , child : const Text ( 'Submit' ) , ) , ) STOP AND ASK THE USER: Pause implementation and ask the user for the following context: "What specific fields do you need in this form?" "What are the exact validation rules for each field (e.g., regex patterns, minimum lengths)?" "What action should occur upon successful validation (e.g., API payload submission, navigation)?" Validate-and-Fix Loop After generating the form, verify the following: Ensure _formKey.currentState!.validate() is null-checked properly using the bang operator ( ! ) or safe calls if the key might be detached. Verify that every validator function explicitly returns null on success. Returning an empty string ( "" ) will trigger an error state with no text. Constraints DO NOT instantiate the GlobalKey inside the build method. It must be a persistent member of the State class. DO NOT use a StatelessWidget for the form container unless the GlobalKey is being passed down from a stateful parent. DO NOT use standard TextField widgets if you require built-in form validation; you must use TextFormField (which wraps TextField in a FormField ). ALWAYS return null from a validator function when the input is valid. ALWAYS ensure the Form widget is a common ancestor to all TextFormField widgets that need to be validated together.