<p>Hello Guys, Today in this post, I'm going to share one of the forms which I designed using flutter. In this example, I have done things like user input validations, showing a showSnackBar upon form submission and then routing to the next page. Also, I have done validation if a number has been provided for a Phone number TextField, which is important while taking Phones numbers as input. For rest of the fields, if they are empty, they will ask for input.</p> <p>![](https://www.fluttercentral.com/Uploads/64d40c7e-06e7-44f3-bdef-6df56cbace39.gifwidth="50%height="auto](</p> <p>Here are the final output and main.dart code. All you need to do is create a default flutter program and copy paste the below content and run it.</p> <p>color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());</p> <p>color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #569cd6;](final appTitle = color: #ce9178;]('Form Validation Demo'; color: #c586c0;](return color: #4ec9b0;](MaterialApp( title: appTitle, home: color: #4ec9b0;](Scaffold( color: #6a9955;](// appBar: AppBar(</p> <pre> color: #6a9955;](// title: Text(appTitle),
color: #6a9955;](// ),
body: color: #4ec9b0;](MyCustomForm(),
), ); </pre> <p>} }</p> <p>color: #569cd6;](class color: #4ec9b0;](MyCustomForm color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override</p> <p id="4ec9b0;](MyCustomFormState();" color:="" color:="">color: #4ec9b0;](MyCustomFormState color: #dcdcaa;](createState() }</p> <p>color: #6a9955;](// Create a corresponding State class. This class will hold the data related to</p> <p>color: #6a9955;](// the form.</p> <p>color: #569cd6;](class color: #4ec9b0;](MyCustomFormState color: #569cd6;](extends color: #4ec9b0;](State { color: #6a9955;](// Create a global key that will uniquely identify the Form widget and allow</p> <p>color: #6a9955;](// us to validate the form</p> <p>color: #6a9955;](//</p> <p>color: #6a9955;](// Note: This is a GlobalKey, not a GlobalKey!</p> <p>color: #569cd6;](final _formKey = color: #4ec9b0;](GlobalKey(); color: #569cd6;](@override</p> <p>color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #6a9955;](// Build a Form widget using the _formKey we created above</p> <pre>color: #c586c0;](return color: #4ec9b0;](SingleChildScrollView( child: color: #4ec9b0;](Form( key: _formKey, child: color: #4ec9b0;](Column( crossAxisAlignment: color: #4ec9b0;](CrossAxisAlignment.start, children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](Column( children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric( horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](FlutterLogo( size: color: #b5cea8;](40.0, ), ), color: #4ec9b0;](Text(color: #ce9178;]('Join Flutter and have fun'), color: #4ec9b0;](TextFormField( decoration: color: #4ec9b0;](InputDecoration( hintText: color: #ce9178;]("First Name", labelText: color: #ce9178;]("First Name"), validator: (value) { color: #c586c0;](if (value.isEmpty) { color: #c586c0;](return color: #ce9178;]('Please enter some text'; } }, ), color: #4ec9b0;](TextFormField( decoration: color: #4ec9b0;](InputDecoration( hintText: color: #ce9178;]("Last Name", labelText: color: #ce9178;]("Last Name"), validator: (value) { color: #c586c0;](if (value.isEmpty) { color: #c586c0;](return color: #ce9178;]('Please enter some text'; } }, ), color: #4ec9b0;](TextFormField( decoration: color: #4ec9b0;](InputDecoration( hintText: color: #ce9178;]("Phone Number", labelText: color: #ce9178;]("Phone Number"), validator: (value) { color: #c586c0;](if (value.isEmpty) { color: #c586c0;](return color: #ce9178;]('Please enter some text'; } color: #c586c0;](else color: #c586c0;](if (!color: #dcdcaa;](isNumeric(value)) { color: #c586c0;](return color: #ce9178;]('Please enter a valid Phone number'; } }, ), color: #4ec9b0;](TextFormField( decoration: color: #4ec9b0;](InputDecoration( hintText: color: #ce9178;]("Address", labelText: color: #ce9178;]("Address"), maxLines: color: #b5cea8;](4, validator: (value) { color: #c586c0;](if (value.isEmpty) { color: #c586c0;](return color: #ce9178;]('Please enter some text'; } }, ), color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric( horizontal: color: #b5cea8;](10.0, vertical: color: #b5cea8;](16.0), child: color: #4ec9b0;](RaisedButton( onPressed: () { color: #6a9955;](// Validate will return true if the form is valid, or false if
color: #6a9955;](// the form is invalid.
color: #c586c0;](if (_formKey.currentState.color: #dcdcaa;](validate()) {
color: #6a9955;](// If the form is valid, we want to show a Snackbar
color: #4ec9b0;](Scaffold.color: #dcdcaa;](of(context)
.color: #dcdcaa;](showSnackBar(color: #4ec9b0;](SnackBar(
content: color: #4ec9b0;](Text(color: #ce9178;]('Processing Data'),
))
.closed
.color: #dcdcaa;](then((color: #4ec9b0;](SnackBarClosedReason reason) {
color: #dcdcaa;](_opennewpage();
});
}
},
child: color: #4ec9b0;](Text(color: #ce9178;]('Sign up'),
),
),
],
),
),
],
),
), ); </pre> <p>} color: #569cd6;](void color: #dcdcaa;](_opennewpage() { color: #4ec9b0;](Navigator.color: #dcdcaa;](of(context).color: #dcdcaa;](push( color: #c586c0;](new color: #4ec9b0;](MaterialPageRoute( builder: (color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Scaffold( appBar: color: #c586c0;](new color: #4ec9b0;](AppBar( title: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]('Success'), ), body: color: #c586c0;](new color: #4ec9b0;](Center( child: color: #c586c0;](new color: #4ec9b0;](Column( mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center, children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric( horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](Column( children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric( horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](FlutterLogo( size: color: #b5cea8;](70.0, ), ), color: #4ec9b0;](Text( color: #ce9178;]('You have Successfully Signed with Flutter', textAlign: color: #4ec9b0;](TextAlign.center, overflow: color: #4ec9b0;](TextOverflow.ellipsis, style: color: #c586c0;](new color: #4ec9b0;](TextStyle(fontWeight: color: #4ec9b0;](FontWeight.w300), ), ], ), ), ], ), ), ); }, ), ); } }</p> <p id="569cd6;](false;" color:="" color:="">color: #4ec9b0;](bool color: #dcdcaa;](isNumeric(color: #4ec9b0;](String s) { color: #c586c0;](try { color: #c586c0;](return color: #4ec9b0;](double.color: #dcdcaa;](parse(s) != color: #569cd6;](null; } color: #c586c0;](catch (e) }</p> <p>` Hope this is useful to you.Thanks, Srikanth</p>