How to perform validation of TextField?
Im new in flutter and I would like to perform some sort of validation of TextField. I would like to check if it is empty and if it is not whether the mail is in correct form. I'm struggling with that, I'm not sure if I should change my main class which is StartPage into StatefulWidget or not. This class contains button which redirect to new page with TextField. In this field we input e-mail and after clicking button some http reqest are made (after validation of course). I read that I need to change this class with TextField into class that extends State.
I found for example: https://flutter.dev/docs/cookbook/forms/validation but for me it is weird that first, we create MyApp which is Stateless then we redirect to class which extends StatefulWidget and it does not make anything then redirect to next class which extends State.
What is the best practice to make it? Thanks for any help.
StartPage
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:.../ui/pages/LoginPage.dart';
class StartPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(60.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(size: 150),
SizedBox(
height: 50.0,
),
Text(
'blabla',
style: TextStyle(fontSize: 60, color: Color(0xffffffff)),
textAlign: TextAlign.center,
),
SizedBox(
height: 30.0,
),
Text(
'Wypożyczaj to, czego potrzebujesz',
style: TextStyle(fontSize: 23, color: Color(0xffffffff)),
textAlign: TextAlign.center,
),
SizedBox(
height: 70.0,
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 240, height: 60),
child: ElevatedButton(
onPressed: () {
Navigator.push(context,
new MaterialPageRoute(builder: (context) => LoginPage()));
},
child: Text('Zaloguj się',
style: TextStyle(fontSize: 30, color: Color(0xffffffff)),
textAlign: TextAlign.center),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF6FC76C),
),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
),
SizedBox(
height: 30.0,
),
OutlinedButton(
onPressed: null,
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(color: Colors.white),
),
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
child: const Text("blabla",
style: TextStyle(
fontSize: 20,
color: Color(0xffffffff),
),
textAlign: TextAlign.center),
),
],
),
),
backgroundColor: const Color(0xFE1A5BFF),
);
}
}
and Loginpage
import 'dart:convert';
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';
import 'package:http/http.dart' as http;
class LoginPage extends StatelessWidget {
final String baseURL =
"....";
final emailController = TextEditingController();
bool emailValidate = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Zaloguj się"),
),
body: Container(
padding: EdgeInsets.all(40.0),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
FlutterLogo(size: 130),
SizedBox(
height: 30.0,
),
Text(
'Zaloguj lub zarejestruj się za pomocą adresu e-mail',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
SizedBox(
height: 30.0,
),
TextField(
controller: emailController,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Adres e-mail',
fillColor: Color(0xffdbdbdb),
filled: true,
errorText:
emailValidate ? 'Please enter a Username' : null)),
SizedBox(
height: 15.0,
),
ConstrainedBox(
constraints: BoxConstraints.tightFor(width: 240, height: 60),
child: ElevatedButton(
onPressed: () => moveToProperWindowBasedOnEmail(
emailController.text, context),
child: Text('blabla',
style: TextStyle(
fontSize: 30,
color: Color(0xffffffff),
),
textAlign: TextAlign.center),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all<Color>(
Color(0xFF2F45C6),
),
shape: MaterialStateProperty.all<RoundedRectangleBorder>(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
),
SizedBox(
height: 35.0,
),
Text(
'Możesz też się zalogować za pomocą:',
style: TextStyle(
fontSize: 18,
color: Color(0xff000000),
),
textAlign: TextAlign.center,
),
SizedBox(
height: 15.0,
),
SignInButton(
Buttons.Google,
text: "Sign up with Google",
onPressed: () {},
),
SignInButton(
Buttons.Facebook,
text: "Sign up with Facebook",
onPressed: () {},
)
],
),
),
backgroundColor: const Color(0xFEF2F7FD),
);
}
Future<void> moveToProperWindowBasedOnEmail(
String text, BuildContext context) async {
//validation
if (validation == 'false') {
....
}
}
}
}
traki1113 Answers
Here is an example of how to use the textformfield with a form widget and validator
import 'package:flutter/material.dart';
class AddUser extends StatefulWidget {
@override
_AddUserState createState() => _AddUserState();
}
class _AddUserState extends State<AddUser> {
TextEditingController id = TextEditingController();
TextEditingController name = TextEditingController();
TextEditingController lastName = TextEditingController();
TextEditingController age = TextEditingController();
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(8.0),
child: Form(
key: _formKey,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Graphql example',
style: TextStyle(fontSize: 22),
),
SizedBox(
height: 50,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: id,
decoration: InputDecoration(
hintText: 'ID',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: age,
decoration: InputDecoration(
hintText: 'Age',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: name,
decoration: InputDecoration(
hintText: 'FirstName',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
TextFormField(
validator: (val) {
return val.isEmpty
? 'please provide a valid value'
: null;
},
controller: lastName,
decoration: InputDecoration(
hintText: 'LastName',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: BorderSide(color: Colors.white))),
),
SizedBox(
height: 20,
),
RaisedButton(
onPressed: () {
if (_formKey.currentState.validate()) {}
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)),
color: Colors.black,
child: Text(
'Submit',
style: TextStyle(color: Colors.white, fontSize: 16),
))
],
),
),
),
),
),
);
}
}
Iyiola AkanbiAs I read your question, I realized that you need a basic understanding of Flutter Widget types.
that is => Stateful & Stateless widgets.
I recommend you search on these firstly. Then you will have an understanding easily. Otherwise these answers will just give you a fish, rather than teaching how to fish.
Suat ÖzkayaI would suggest you to use flutter's new form widget inside that widget you can pass multiple textformfields widgets .
The best part about these new widgets is that they accept a validator key inside which you can write all the validation for specific text field and return false in case of validation passes.
Checkout the form below for better understanding
Mrinal JainUser contributions licensed under CC BY-SA 3.0