How to put multiple validation on a textfeild - validation

i have textFeilds i put empty feild validation but i don't know how to put another validation(Multiple validation) like "Email is invalid" or whatever i want. This is just important code, all code is a lill lengthy
final TextEditingController _emailControl = new TextEditingController();
bool _validateEmail = false;
child: TextField(
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.white,),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white,),
borderRadius: BorderRadius.circular(5.0),
),
hintText: "Email",
prefixIcon: Icon(
Icons.mail_outline,
color: Colors.black,
),
hintStyle: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
labelText: 'Email',
errorText: _validateEmail ? 'Email Can\'t Be Empty' : null,
),
maxLines: 1,
controller: _emailControl,
),
My registration button press is below
onPressed: () {
setState(() {
_emailControl.text.isEmpty ? _validateEmail = true : _validateEmail = false;
if ( _validateEmail == false ){
_isLoading = true;
khan();
}
});

Use TextFormField.
TextFormField(
validator(val):{
if(val.isEmpty){
return "This field cannot be empty",
}
else if(next conditon){
return ....
}
}
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.white,),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white,),
borderRadius: BorderRadius.circular(5.0),
),
hintText: "Email",
prefixIcon: Icon(
Icons.mail_outline,
color: Colors.black,
),
hintStyle: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
labelText: 'Email',
errorText: _validateEmail ? 'Email Can\'t Be Empty' : null,
),
maxLines: 1,
controller: _emailControl,
),
And finally use form to validate the textfield.

Related

flutter TextFormField validation display alignment error

I have a TextFormField with validation on Empty.
In order to control height, TextFormField was nested inside Container widget.
Which cause unexpected side effect of displaying error message overlap as attached pictures.
to test sample code, press "Submit" to see error.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: SimpleForm(),
);
}
}
class SimpleForm extends StatelessWidget {
#override
Widget build(BuildContext context) {
final formKey = GlobalKey<FormState>();
return SafeArea(
child: Scaffold(
// primary: true,
body: Form(
key: formKey,
child: Column(
children: [
SizedBox(
height: 0,
),
// Container(height: 0,),
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
// errorStyle: TextStyle(fontSize: 0, height: 0),
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
FlatButton(
child: Text('Submit'),
onPressed: () {
formKey.currentState.validate();
},
)
],
),
)),
);
}
}
Solution 1. You can set helperText for the TextField's decoration and increase the Container's height:
Container(
height: 60,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
helperText: ' ', // this is new
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
Solution 2. You can set the line height of the error message to 0 (it will be displayed above the text field):
Container(
height: 38,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
errorStyle: TextStyle(height: 0), // this is new
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
You can use this
TextFormField(
decoration: new InputDecoration(
enabledBorder: OutlineInputBorder( //change border of enable textfield
borderRadius: BorderRadius.all(Radius.circular(40.0)),
borderSide: BorderSide(color: colorValue),),
focusedBorder: OutlineInputBorder( //focus boarder
borderRadius: BorderRadius.all(Radius.circular(40.0)),
borderSide: BorderSide(color: colorValue),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.red),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.orange),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.green),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,)
),
errorBorder: OutlineInputBorder(. //error boarder
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.black)
),
isDense: true,
counterText: "",
contentPadding: EdgeInsets.fromLTRB(10, 20, 10, 0), //padding according to your need
hintText: "create new",
hintStyle: TextStyle(color: colorValue, fontSize: 13)),
)),
Thanks for the answer Mobina,
Seem like issues is flutter limitation. For time being..
with border I decide to display error message on top. (Your solution :1)
without border I can display err msg as usual. (Your solution : 2)
// with border
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(fontSize: 14),
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
errorStyle: TextStyle(height: 0),
),
validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
),
),
// without border
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(fontSize: 14),
decoration: InputDecoration(
hintText: 'Name',
helperText: ' ', isDense: true,
counterText: "",
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
),
validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
),
),

how i can add validator: (value) { if (value.isEmpty) { return 'Please enter some text'; } return null; }, );

import 'package:awwapp/Auth/registration.dart';
import 'package:flutter/material.dart';
// import 'package:flutter/services.dart';
class LoginPage extends StatefulWidget {
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
final _formKey = GlobalKey<FormState>();
#override
Widget build(BuildContext context) {
final emailField = TextField(
obscureText: false,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Email",
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final passwordField = TextField(
obscureText: true,
style: style,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
hintText: "Password",
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final loginButon = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Color(0xff01A0C7),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {},
child: Text("Login",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.bold)),
),
);
final registrationButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Color(0xff01A0C7),
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => RegistrationPage()),
);
},
child: Text("Register",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.bold)),
),
);
return Scaffold(
body: Form(
key: _formKey,
child: Center(
child: Container(
color: Colors.white,
child: Padding(
padding: const EdgeInsets.all(36.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 155.0,
child: Image.asset(
"assets/logo/logo.png",
fit: BoxFit.contain,
),
),
SizedBox(height: 45.0),
emailField,
SizedBox(height: 25.0),
passwordField,
SizedBox(
height: 35.0,
),
loginButon,
SizedBox(
height: 15.0,
),
registrationButton,
],
),
),
),
),
),
);
}
}
"TextFormField(
// The validator receives the text that the user has entered.
validator: (value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
); "
here is the my whole code
i am creating login for my project and i want to validate these fields that is mention at above and i want to add code that i mentioned in double qoutes how i can add these code in my above mention code
i Want to validate these fields but i am facing errors plz help me how can i add
how i can add code mention in double quotes in my above code
You already have a form. What you need to change the TextField to TextFormField.
TextFormField supports the validator method.
See the complete sample at bottom of this link
https://flutter.dev/docs/cookbook/forms/validation

How to design a textfield like whatsapp in flutter

I need the textfield should expand vertically up to 5 enter key pressed
after the 5th enter other lines are should enclose within the scrollbar
how can I achieve the textfield I need using flutter
now I set the maxlines: null in the textfield
thank you guys for your suggestions but I have found the actual textfield by the below code
Flexible(
child: new ConstrainedBox(
constraints: new BoxConstraints(
minWidth: size.width,
maxWidth: size.width,
minHeight: 25.0,
maxHeight: 135.0,
),
child: new Scrollbar(
child: new TextField(
cursorColor: Colors.red,
keyboardType: TextInputType.multiline,
maxLines: null,
controller: tc,
_handleSubmitted : null,
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(
top: 2.0,
left: 13.0,
right: 13.0,
bottom: 2.0),
hintText: "Type your message",
hintStyle: TextStyle(
color:Colors.grey,
),
),
),
),
),
),
You can achieve by adding maxLine and minLine in TextField
new TextField(
minLines: 1,
maxLines: 5,
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 5.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 5.0),
),
hintText: 'Mobile Number',
),
)

Flutter: How to move TextField characer counter?

The title sums up the question pretty well. I have a TextField with a maxLength: 250 and this is what it looks like:
Is there a way to put the counter somewhere else? Optimally to the left of the send button, but otherwise maybe just above and on the left of the TextField. Any ideas? Thanks!
Probably not necessary, but here's my code:
TextField(
controller: inputTextEditingController,
focusNode: inputFocusNode,
style: TextStyle(color: Platform.isAndroid ? Colors.green : Colors.blue, height: 0.8),
maxLength: 250,
maxLines: null,
decoration: InputDecoration(
contentPadding: const EdgeInsets.fromLTRB(20, 15, 0, 15),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28)),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Platform.isAndroid ? Colors.green : Colors.blue),
borderRadius: BorderRadius.circular(28)),
suffixIcon: IconButton(
onPressed: _handleSubmitted,
icon: Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 20, 0),
child: Icon(Icons.send,
color: inputFocusNode.hasFocus
? Platform.isAndroid ? Colors.green : Colors.blue
: Colors.black54),
),
),
hintText: "Say something!",
hintStyle: inputFocusNode.hasFocus
? TextStyle(color: Platform.isAndroid ? Colors.green : Colors.blue, fontSize: 16)
: TextStyle(color: Colors.black54)),
You need to build and pass your own counter as a buildCounter parameter of a TextField Widget.
TextField(
maxLength: 250,
buildCounter: (_, {currentLength, maxLength, isFocused}) => Padding(
padding: const EdgeInsets.only(left: 16.0),
child: Container(
alignment: Alignment.centerLeft,
child: Text(currentLength.toString() + "/" + maxLength.toString())),
),
)
child: new TextField(
style: BurmeseUtil.textStyle(context),
controller: txtController,
maxLength: 1500,
maxLines: null,
decoration: new InputDecoration(
counterText: '',
border: OutlineInputBorder(),
),
),
Use decoration in TextField.Add counterText:' '
Good luck

Trying to validate TextFormField with null input but its not working and popping some weird error in Flutter [P.S: Still a learner]

import 'package:flutter/material.dart';
import 'package:splash_screen/login_signup/signuppage.dart';
class LoginPage extends StatefulWidget {
static String tag = 'login-page';
#override
_LoginPageState createState() => _LoginPageState();
}
class _LoginPageState extends State<LoginPage> {
final formKey = new GlobalKey<FormState>();
String _email;
String _password;
void validateAndSave() {
final form = formKey.currentState;
if(form.validate()){
print('Login Successful');
}
else{
print('Login Failed!');
}
}
#override
Widget build(BuildContext context) {
return new Scaffold(
resizeToAvoidBottomPadding: false,
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(16.0, 90.0, 0.0, 0.0),
child: Text('Log In',
style: TextStyle(
fontSize: 40.0, fontWeight: FontWeight.bold)),
),
Container(
padding: EdgeInsets.fromLTRB(125.0, 60.0, 0.0, 0.0),
child: Text('.',
style: TextStyle(
fontSize: 80.0,
fontWeight: FontWeight.bold,
color: Colors.green)),
)
],
),
),
Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
key: formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(
labelText: 'EMAIL',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
validator: (value) => value.isEmpty
? 'Please Enter a Email Address' :
),
SizedBox(height: 20.0),
TextFormField(
decoration: InputDecoration(
labelText: 'PASSWORD',
labelStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.green))),
obscureText: true,
validator: (value) =>
value.isEmpty ? 'Password cannot be empty!' : null),
SizedBox(height: 5.0),
Container(
alignment: Alignment(1.0, 0.0),
padding: EdgeInsets.only(top: 15.0, left: 20.0),
child: InkWell(
child: Text(
'Forgot Password',
style: TextStyle(
color: Colors.green,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat',
decoration: TextDecoration.underline),
),
),
),
SizedBox(height: 40.0),
Container(
height: 40.0,
child: Material(
borderRadius: BorderRadius.circular(20.0),
shadowColor: Colors.greenAccent,
color: Colors.green,
elevation: 7.0,
child: GestureDetector(
onTap: () {
validateAndSave();
},
child: Center(
child: Text(
'LOGIN',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat'),
),
),
),
),
),
SizedBox(height: 20.0),
Container(
height: 40.0,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
style: BorderStyle.solid,
width: 1.0),
color: Colors.transparent,
borderRadius: BorderRadius.circular(20.0)),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Center(
// child:
// ImageIcon(AssetImage('facebook.png')),
// ),
SizedBox(width: 10.0),
Center(
child: Text('Log in with facebook',
style: TextStyle(
fontWeight: FontWeight.bold,
fontFamily: 'Montserrat')),
)
],
),
),
)
],
)),
SizedBox(height: 15.0),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Dont have an account?',
style: TextStyle(fontFamily: 'Montserrat'),
),
SizedBox(width: 5.0),
InkWell(
onTap: () {
// Navigator.of(context).pushNamed('/signup');
Navigator.push(context,
MaterialPageRoute(builder: (context) => SignupPage()));
},
child: Text(
'Register',
style: TextStyle(
color: Colors.green,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
decoration: TextDecoration.underline),
),
)
],
)
],
));
}
}
So, I was trying to implement TextField validator in my login page. And I sort of implemented it, don't know what's going wrong with it but it shows gesture exception where I am not able to find any solution for it, even tried searching on the internet for understanding what that error means.
the exception I see on terminal looks like this
https://imgur.com/a/nCXi5Ec
The image shows the terminal output for gesture exception.
You havn't used Form as an Parent to TextFormField.
Wrap your Container in Form Widget.
Form(
key: formKey,
child: Container(
padding: EdgeInsets.only(top: 35.0, left: 20.0, right: 20.0),
.....

Resources