There are many ways to submit user-input data in Flutter. But the most used way is using TextFields. But there is a drawback of using TextFields it requires controller of the every text field you create in Flutter. So to Overcome makes the use of Forms. Forms in flutter don’t need any textController to store data. It just needs 1 GlobalKey which is set to FormState.
Note: The below code doesn’t have a submit button as there is no requirement for it here. Readers can add their own functionality to the form and use the below code as a template.
Source Code:
import 'package:flutter/material.dart' ;
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
} class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "FormValidation" ,
home: MyHomePage(),
);
}
} class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
} class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> _formKey = GlobalKey();
String email = "" ;
String password = "" ;
void _submit() {
// you can write your
// own code according to
// whatever you want to submit;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text( "Form Validation" ),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'E-Mail' ),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {
setState(() {
email = value;
});
},
validator: (value) {
if (value.isEmpty || !value.contains( '@' )) {
return 'Invalid email!' ;
}
},
),
// this is where the
// input goes
TextFormField(
decoration: InputDecoration(labelText: 'password' ),
keyboardType: TextInputType.visiblePassword,
obscureText: true ,
validator: (value) {
if (value.isEmpty && value.length < 7) {
return 'Invalid password!' ;
}
},
onFieldSubmitted: (value) {
setState(() {
password = value;
});
},
),
RaisedButton(
onPressed: _submit,
child: Text( "submit" ),
),
],
),
),
// this is where
// the form field
// are defined
SizedBox(
height: 20,
),
Column(
children: <Widget>[
email.isEmpty ? Text( "No data" ) : Text(email),
SizedBox(
height: 10,
),
password.isEmpty ? Text( "No Data" ) : Text(password),
],
)
],
),
),
);
}
} |
Output:
The complete source code at:- https://github.com/codec-akash/FormData