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.
![](https://www.fluttercentral.com/Uploads/64d40c7e-06e7-44f3-bdef-6df56cbace39.gifwidth="50%height="auto](
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.
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget {
color: #569cd6;](@override
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(
color: #6a9955;](// title: Text(appTitle),
color: #6a9955;](// ),
body: color: #4ec9b0;](MyCustomForm(),
),
);
}
}
color: #569cd6;](class color: #4ec9b0;](MyCustomForm color: #569cd6;](extends color: #4ec9b0;](StatefulWidget {
color: #569cd6;](@override
color: #4ec9b0;](MyCustomFormState color: #dcdcaa;](createState() {
color: #c586c0;](return color: #4ec9b0;](MyCustomFormState();
}
}
color: #6a9955;](// Create a corresponding State class. This class will hold the data related to
color: #6a9955;](// the form.
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
color: #6a9955;](// us to validate the form
color: #6a9955;](//
color: #6a9955;](// Note: This is a GlobalKey, not a GlobalKey!
color: #569cd6;](final _formKey = color: #4ec9b0;](GlobalKey();
color: #569cd6;](@override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) {
color: #6a9955;](// Build a Form widget using the _formKey we created above
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'),
),
),
],
),
),
],
),
),
);
}
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),
),
],
),
),
],
),
),
);
},
),
);
}
}
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) {
color: #c586c0;](return color: #569cd6;](false;
}
}
`
Hope this is useful to you.Thanks,
Srikanth