How to implement Form Validation in Flutter
In this article we will learn how to apply form validation in flutter. For form validation we will use flutter_form_builder which provide us syntactic sugar for creating a form widget and reduce the boilerplate needed to build a form, validate fields, react to changes, and collect the value of the form in the form of a map. So let’s begin to implement form validation in flutter.
-
First and basic step to create new application in flutter. If you are a beginner in flutter then you can check my blog Create a first app in Flutter. I have created an app named as “flutter_form_validation”
-
We need to add form builder plugin which provide us form validation for that, open the pubspec.yaml file in your project and add the following dependencies into it.
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
flutter_form_builder: ^3.4.1
- Now, go to main.dart and import form builder package.
import 'package:flutter_form_builder/flutter_form_builder.dart';
- Now, we will implement all types of form validation controllers to understand how to apply validation to form controllers. Following is the programatically implementation for that.
import 'package:flutter/material.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
import 'package:intl/intl.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.purple,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var data;
bool autoValidate = true;
bool readOnly = false;
bool showSegmentedControl = true;
final GlobalKey<FormBuilderState> _fbKey = GlobalKey<FormBuilderState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Form Validation"),
),
body: Padding(
padding: EdgeInsets.all(10),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
FormBuilder(
key: _fbKey,
initialValue: {
'date': DateTime.now(),
'accept_terms': false,
},
autovalidate: true,
child: Column(
children: <Widget>[
FormBuilderTextField(
attribute: 'text',
validators: [FormBuilderValidators.required()],
decoration: InputDecoration(labelText: "Full Name"),
),
FormBuilderDateTimePicker(
attribute: "date",
inputType: InputType.date,
validators: [FormBuilderValidators.required()],
format: DateFormat("dd-MM-yyyy"),
decoration: InputDecoration(labelText: "Date of Birth"),
),
FormBuilderDropdown(
attribute: "gender",
decoration: InputDecoration(labelText: "Gender"),
// initialValue: 'Male',
hint: Text('Select Gender'),
validators: [FormBuilderValidators.required()],
items: ['Male', 'Female', 'Other']
.map((gender) => DropdownMenuItem(
value: gender, child: Text("$gender")))
.toList(),
),
FormBuilderTextField(
attribute: "age",
decoration: InputDecoration(labelText: "Age"),
keyboardType: TextInputType.number,
validators: [
FormBuilderValidators.numeric(),
FormBuilderValidators.max(70),
],
),
FormBuilderSlider(
attribute: "slider",
validators: [FormBuilderValidators.min(6)],
min: 0.0,
max: 10.0,
initialValue: 1.0,
divisions: 20,
decoration: InputDecoration(
labelText: "Number of Family Members"),
),
FormBuilderSegmentedControl(
decoration: InputDecoration(labelText: "Rating"),
attribute: "movie_rating",
options: List.generate(5, (i) => i + 1)
.map(
(number) => FormBuilderFieldOption(value: number))
.toList(),
),
FormBuilderStepper(
decoration: InputDecoration(labelText: "Stepper"),
attribute: "stepper",
initialValue: 10,
step: 1,
),
FormBuilderCheckboxList(
decoration:
InputDecoration(labelText: "Languages you know"),
attribute: "languages",
initialValue: ["English"],
options: [
FormBuilderFieldOption(value: "English"),
FormBuilderFieldOption(value: "Hindi"),
FormBuilderFieldOption(value: "Other")
],
),
FormBuilderSignaturePad(
decoration: InputDecoration(labelText: "Signature"),
attribute: "signature",
height: 100,
),
FormBuilderRate(
decoration: InputDecoration(labelText: "Rate this site"),
attribute: "rate",
iconSize: 32.0,
initialValue: 1,
max: 5,
),
FormBuilderCheckbox(
attribute: 'accept_terms',
label: Text(
"I have read and agree to the terms and conditions"),
validators: [
FormBuilderValidators.requiredTrue(
errorText:
"You must accept terms and conditions to continue",
),
],
),
],
),
),
Row(
children: <Widget>[
MaterialButton(
child: Text("Submit"),
onPressed: () {
_fbKey.currentState.save();
if (_fbKey.currentState.validate()) {
print(_fbKey.currentState.value);
}
},
),
MaterialButton(
child: Text("Reset"),
onPressed: () {
_fbKey.currentState.reset();
},
),
],
)
],
),
),
),
);
}
}
- Great, you are done with form validation in flutter. Run this project in device or emulator and check the output.
In this article we have learned how to implement form validation in flutter. You can check out more validation in plugins official documentation.