I have a TextFormField. This widget validation is empty show error text. However, the error text fill looks like the picture. How can i solve it.
SizedBox(
height: 50,
child: TextFormField(
validator: (val) {
if (val!.isEmpty) {
return "Boş Geçilemez";
}
if (val.length > 100) {
return "Karakter Sınırı Hatası";
}
return null;
},
obscureText: true,
decoration: InputDecoration(
suffixIcon: const Icon(
Icons.lock_outline_rounded,
color: Color(0xffBDBDBD),
),
hintText: AppLocalizations.getString("sifre"),
contentPadding:
const EdgeInsets.only(top: 14, left: 10, bottom: 10)),
controller: passwordController,
),
),
It would be better if you use same content padding for top and bottom, and try increasing the height of TextFiled like 64.
And use autovalidateMode: AutovalidateMode.onUserInteraction,
SizedBox(
height: 64,
child: TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
validator: (val) {
if (val != null && val.isEmpty) {
return "Boş Geçilemez";
}
if (val!.length > 10) {
return "Karakter Sınırı Hatası";
}
return null;
},
decoration: InputDecoration(
suffixIcon: const Icon(
Icons.lock_outline_rounded,
color: Color(0xffBDBDBD),
),
hintText: "sifre",
contentPadding: const EdgeInsets.only(
top: 14,
left: 10,
bottom: 14,
)),
),
),
Related
I have to make one application which take so many user input , that's why i use so many Textfiled in my code for taking user input.
An Textfiled validation time I simply use List of Global keys and it's work perfactly.
But problem is when user give wrong input then textfiled show an error message that time my Textbox UI can change (UI well change in very appropriately).
Pleas help , what can i do so my error message postion will be changed.
TextFiled code :
//this is inside the statfull Widget
GlobalKey<FormState> _formkeySubNumber = new GlobalKey();
Widget SubNumber_Input_Box() {
return Form(
//for form validation
key: _formkeySubNumber,
child: Container(
margin: EdgeInsets.only(top: 7, left: 6),
height: 38,
width: 300,
decoration: BoxDecoration(
color: HexColor("#D9D9D9"),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
//padding
child: Padding(
padding: EdgeInsets.only(left: 12),
//textfiled
child: TextFormField(
//for validation
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Subject Number';
}
return null;
},
//for storing user input && value in string format so we convert into the int formate
onChanged: (value) {
subjectNumber = int.tryParse(value)!;
},
//for only number
keyboardType: TextInputType.number,
decoration: const InputDecoration(
hintText: "Enter Minimum-4 to Maximum-8 Subject",
hintStyle: TextStyle(
fontFamily: "RobotoSlab",
fontSize: 14,
),
//for remove underline from input filed
border: InputBorder.none,
),
//for store only integer value
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
],
),
),
),
);
}
And this call inside the one Button Like that
[Container(
margin: EdgeInsets.only(top: 5),
child: ElevatedButton(
child: Text("Go"),
style: ElevatedButton.styleFrom(
primary: HexColor("#EE6C4D"),
//this colour set (opacity is low) when button is disable
onSurface: HexColor("#E0FBFC"),
),
//store user value -->subjectNumber
onPressed: isGoButtonActive
? () {
//for Form Validation
if (_formkeySubNumber.currentState!
.validate()) {
//this show the container after prerssed button
showContainer1();
}
setState(() {
// //this is for store subjectnumber value from user input
// subjectNumber =
// subNumber_Controller.text;
// print("Subject Number Is : $subjectNumber");
});
}
: null,
),
),]
You have created a container around the textfield with specific height. For styling a textfield you can use
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey),
hintText: "Type in your text",
fillColor: Colors.white),
)
This way the error message appears below the textfield and outside the white area.
You can remove the height from Form> Container. And it will give you flexible height based on error state.
Widget SubNumber_Input_Box() {
return Form(
key: _formkeySubNumber,
child: Container(
width: 300,
color: HexColor("#D9D9D9"),
//padding
child: Padding(
padding: EdgeInsets.only(left: 12),
child: TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction, // you might like this as well
Also I will suggest to look at OutlineInputBorder
Widget SubNumber_Input_Box() {
return Form(
key: _formkeySubNumber,
child: Padding(
padding: EdgeInsets.only(left: 12),
child: TextFormField(
autovalidateMode: AutovalidateMode.onUserInteraction,
//for validation
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please Enter Subject Number';
}
return null;
},
//for storing user input && value in string format so we convert into the int formate
onChanged: (value) {
subjectNumber = int.tryParse(value)!;
},
//for only number
keyboardType: TextInputType.number,
decoration: const InputDecoration(
hintText: "Enter Minimum-4 to Maximum-8 Subject",
hintStyle: TextStyle(
fontFamily: "RobotoSlab",
fontSize: 14,
),
enabledBorder: OutlineInputBorder(),
errorBorder: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
border: OutlineInputBorder(),
),
//for store only integer value
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.allow(RegExp(r'[0-9]')),
],
),
),
);
}
I want to insert a border to my text field as image showing. how can I do this. here's my code I have implemented so far with no borders.
TextFormField(
controller: emailEditingController,
enabled: typing,
decoration: const InputDecoration(
hintText: "Email",
hintStyle: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
email = text!;
// print(email);
},
onSaved: (value) {
loginUserData['email'] = value!;
},
),
you can edit the border by adding a border to the decoration of your field:
TextFormField(
controller: emailEditingController,
enabled: true,
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintText: "Email",
hintStyle:
TextStyle(color: Colors.grey, fontFamily: "Dubai", fontSize: 14),
),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
email = text!;
// print(email);
},
onSaved: (value) {
// loginUserData['email'] = value!;
},
),
the output would look like:
please add Containers padding property and contentPadding property to this code so you can achieve the layout
Container(
padding:
EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
child: TextFormField(
contentPadding: EdgeInsets.fromLTRB(20, 5, 10, 5),
this is my full code
Container(
padding:
EdgeInsets.only(left: 20, right: 20, top: 20, bottom: 20),
child: TextFormField(
controller: emailEditingController,
decoration: InputDecoration(
alignLabelWithHint: true,
floatingLabelBehavior:FloatingLabelBehavior.never,
contentPadding: EdgeInsets.fromLTRB(20, 5, 10, 5),
labelText: "Email/User name",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
hintStyle: TextStyle(
color: textGrey, fontFamily: "Dubai", fontSize: 14),
),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
// email = text!;
// print(email);
},
onSaved: (value) {
// loginUserData['email'] = value!;
},
)),
out put will be
I have TextFormField and I increased height of this field. I would like to start text from the left top corner and make that text will break at the end of the line. So if someone will put a lot of text, field will have X lines not only one.
How it looks now:
How it should looks like
Code:
TextFormField(
controller: contentController,
decoration: InputDecoration(
contentPadding: new EdgeInsets.symmetric(
vertical: MediaQuery.of(context).size.height * .10,
horizontal: 10.0),
border: OutlineInputBorder(),
hintText: 'Treść',
fillColor: Color(0xffffffff),
filled: true,
prefixIcon: Icon(Icons.topic_rounded),
),
validator: (value) {
if (value == null || value.isEmpty) {
return ErrorMessages.NO_CONTENT_MESSAGE;
}
},
),
There are a few things you can do:
You can add maxLines: desiredNumberOfLines and textAlignVertical: TextAlignVertical.top, to your TextFormField and wrap your prefix icon with Padding like this:
TextFormField(
textAlignVertical: TextAlignVertical.top,
decoration: InputDecoration(
prefixIcon: Padding(
padding: const EdgeInsets.only(bottom: 70.0),
child: Icon(
Icons.topic_rounded,
),
),
...
),
maxLines: 5,
...
),
You can wrap your TextFormField with a SizedBox widget and add expands: true to the text field, also you have to set minLines and minLines to null, because otherwise you get an error. The icon alignment can be the same as in the previous example with wrapping the icon with a Padding widget or you can do it the other way, which is shown in this example. It is done by using a prefix parameter instead of prefixIcon like this:
SizedBox(
height: 200,
child: TextFormField(
textAlignVertical: TextAlignVertical.top,
expands: true,
maxLines: null,
minLines: null,
decoration: InputDecoration(
prefix: Icon(
Icons.topic_rounded,
),
...
),
...
),
)
Choose a combination of text and icon alignment methods that works best for you.
You need to specify the height of your prefix icon by default it will be in the center. But to make it go on top you need to add Container() in which you will add your icon like this.
TextFormField(
minLines: 4,
keyboardType: TextInputType.multiline,
maxLines: 4,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Treść',
fillColor: Color(0xffffffff),
filled: true,
prefixIcon: Container(
width: 20,
height: 100,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.topic_rounded),
),
Container(),
],
),
),
prefixIconConstraints: BoxConstraints(
minWidth: 35,
minHeight: 0,
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return "error";
}
return null;
},
)
It will look like this
I am designing a login screen and its design is given above.
I am using flutter_bloc library to set the disable state of ElevatedButton.
Now i want to display error message with cross icon in for password and email validation as show in the image.
I have made a custom file named custom_input to display the TextField.
How can i achieve the flow as shown in image.
Kindly help me.
Thanks in advance.
TextFormField(
decoration: InputDecoration(
hintText: 'Enter Description (Html or Normal Text)',
border: OutlineInputBorder(),
labelText: 'Description',
contentPadding: EdgeInsets.only(
right: 0, left: 10, top: 15, bottom: 5),
suffixIcon: Padding(
padding: const EdgeInsets.all(8.0),
child: CircleAvatar(
radius: 15,
backgroundColor: Colors.grey[300],
child: IconButton(
icon: Icon(Icons.close, size: 15),
onPressed: () {
descriptionCtrl.clear();
}),
),
)),
textAlignVertical: TextAlignVertical.top,
minLines: 5,
maxLines: null,
keyboardType: TextInputType.multiline,
controller: descriptionCtrl,
validator: (value) {
if (value.isEmpty) return 'Value is empty';
return null;
},
onChanged: (String value) {
setState(() {
description = value;
});
},
),
I'm navigating to the next page within my Flutter app.
On the next page there are a few Forms where a user can enter text.
final _form2Key = GlobalKey<FormState>();
Padding(
padding: EdgeInsets.only(top: 8.0),
child: Container(
width: screenWidth / 1.1,
height: screenHeight / 5.5,
child: Form(
key: _form2Key,
autovalidate: true,
child: TextFormField(
autofocus: true,
validator: (val) {
if (val.trim().length < 3 || val.isEmpty) {
return "Too short";
} else if (val.trim().length > 200) {
return "Too long";
} else {
return null;
}
},
onSaved: (val) => description = val,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: " ",
),
),
),
),
Everything 'works', but after navigating to this new page, the keyboard shows up automatically and is focussed on the textfield.
Is it possible to avoid the keyboard popping up and only show the keyboard when the user presses the form?
Thanks in advance!
your keyboard is automatically popping up because you have set autofocus to true, please modify to false or remove that property to avoid keyboard from automatically popping up
final _form2Key = GlobalKey<FormState>();
Padding(
padding: EdgeInsets.only(top: 8.0),
child: Container(
width: screenWidth / 1.1,
height: screenHeight / 5.5,
child: Form(
key: _form2Key,
autovalidate: true,
child: TextFormField(
autofocus: false, // modified
validator: (val) {
if (val.trim().length < 3 || val.isEmpty) {
return "Too short";
} else if (val.trim().length > 200) {
return "Too long";
} else {
return null;
}
},
onSaved: (val) => description = val,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: " ",
),
),
),
),
),