I added TextFormField validation message..Everything working good. But All text not displayed.
Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.only(top: 30.0),
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'The password you entered does not meet the minimum requirement. Please refer the Password Policy for more details.';
},
obscureText: true,
controller: confirmPasswordController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(20.0),
labelText: AppTranslations.of(context)
.text("passwordpage_username"),
),
),
),
Try this code
Expanded(
child: Container(
padding: EdgeInsets.all(16.0),
margin: EdgeInsets.only(top: 30.0),
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'The password you entered does not meet the minimum requirement.\n Please refer the Password Policy for more details.';
},
obscureText: true,
controller: confirmPasswordController,
keyboardType: TextInputType.emailAddress,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(20.0),
labelText: AppTranslations.of(context)
.text("passwordpage_username"),
),
),
)
),
Related
I was add 2 input field in the same row in the mobile screen input fields are collapsed when showing error.
Row(
children: <Widget>[
Expanded(
flex: 2,
child: TextFormField(
autovalidateMode: AutovalidateMode
.onUserInteraction,
keyboardType: TextInputType.number,
controller: controller.plz,
validator: ValidationBuilder(
localeName: localeLanguage)
.digits()
.minLength(5)
.required()
.build(),
decoration: inputdecoration(),
)),
SizedBox(width: 10.0),
Expanded(
flex: 3,
child: TextFormField(
autovalidateMode: AutovalidateMode
.onUserInteraction,
validator: ValidationBuilder(
localeName: localeLanguage)
.required()
.build(),
controller: controller.place,
decoration: inputdecoration(),
))
],
),
InputDecoration(
errorMaxLines: 3,
helperText: '',
contentPadding:
new EdgeInsets.symmetric(vertical: 10.0, horizontal: 10.0),
fillColor: AsianmastaColors.white,
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 1.0)))
//after showing error
new
Its hard to read the code. First update your question adding the code on code block. You will find {} symbol just above the text pad.
give the Row crossAxisAlignment.start and it will work
Row(
crossAxisAlignment: CrossAxisAlignment.start
children: <Widget>[
Expanded(
flex: 2,
child: TextFormField(
autovalidateMode: AutovalidateMode
.onUserInteraction,
keyboardType: TextInputType.number,
controller: controller.plz,
validator: ValidationBuilder(
localeName: localeLanguage)
.digits()
.minLength(5)
.required()
.build(),
decoration: inputdecoration(),
)),
SizedBox(width: 10.0),
Expanded(
flex: 3,
child: TextFormField(
autovalidateMode: AutovalidateMode
.onUserInteraction,
validator: ValidationBuilder(
localeName: localeLanguage)
.required()
.build(),
controller: controller.place,
decoration: inputdecoration(),
))
],
),
Why my textfield input type number is hard to type number, must type dot or commas then can type number
why after I move to next textfield, the first textfield auto clear?
but in web is normal, just on phone
this my code
final TFNik = TextEditingController();
final TFPassword = TextEditingController();
Padding(
//padding: const EdgeInsets.only(left:15.0,right: 15.0,top:0,bottom: 0),
padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(
controller: TFNik,
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
WhitelistingTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'NIK',
hintText: 'Enter valid NIK'),
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0),
//padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(
controller: TFPassword,
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter secure password'),
),
),
Try below code hope its help to you
declare TextEditingController
late TextEditingController username;
late TextEditingController password;
Declare controller for initState and dispose state
#override
void initState() {
super.initState();
username = TextEditingController();
password = TextEditingController();
}
#override
void dispose() {
username.dispose();
password.dispose();
super.dispose();
}
Declare Widget
Column(
children: [
Padding(
padding: EdgeInsets.all(15),
child: TextField(
controller: username,
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'NIK',
hintText: 'Enter valid NIK'),
),
),
Padding(
padding: const EdgeInsets.only(
left: 15.0, right: 15.0, top: 15, bottom: 0),
//padding: EdgeInsets.symmetric(horizontal: 15),
child: TextField(
controller: password,
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter secure password'),
),
),
],
),
Your result screen ->
I don't understood what's happening, but when the form got erros the helper text message is moving the TextFormField. I tried increasing the height but I could not fix.
Anyone knows what's happening?
Look the image:
Follow the code:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
alignment: Alignment.centerRight,
child: CountryCodePicker(
showFlagMain: true,
onChanged: print,
initialSelection:
I18n.of(context).locale.countryCode,
favorite: ['+55', 'BR'],
showCountryOnly: false,
showOnlyCountryWhenClosed: false,
textStyle: TextStyle(
color: Colors.white, fontSize: 19.0),
flagWidth: 40.0,
)),
Container(
width: 200,
alignment: Alignment.center,
child: TextFormField(
keyboardType: TextInputType.phone,
controller: _phoneTextController,
inputFormatters: [
MaskTextInputFormatter(
mask: "(##) #####-####",
filter: {"#": RegExp(r'[0-9]')})
],
autocorrect: false,
autofocus: false,
style: TextStyle(
color: Colors.white, fontSize: 19.3),
cursorColor: Colors.yellow,
decoration: const InputDecoration(
border: InputBorder.none,
hintText: '(99) 99999-9999',
filled: true,
hintStyle: TextStyle(color: Colors.grey)),
validator: (String value) =>
phoneValidator(value),
))
],
),
SizedBox(height: 20),
RaisedButton(
child: Text('Send'),
onPressed: () {
if (this._form.currentState.validate()) {
print(this._unmask(this._phoneTextController.text));
}
},
)
],
Thanks.
Try to wrap the container in an expanded widget.
You can modify the crossAxisAlignment of your Row to CrossAxisAlignment.start and the TextFormField widgets will be aligned when showing error text. A sample of this is below.
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 250,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return '$firstName must not be empty.';
}
return null;
},
controller: firstNameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: firstName,
),
),
),
Container(
width: 250,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return '$lastName must not be empty.';
}
return null;
},
controller: lastNameController,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: lastName,
),
),
)
]),
),
I'm trying to make my TextFormField 'bigger'. I tried this code, it does make it bigger, but if I type (here: qwerty) it starts in the middle. Is there an option to start in the left upper corner?
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(
validator: (val) {
if (val.trim().length > 200) {
return "Beschrijving te lang";
} else {
return null;
}
},
onSaved: (val) => beschrijving = val,
minLines: null,
maxLines: null,
expands: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: " ",
),
),
),
),
)
You can try this.
Padding(
padding: EdgeInsets.all(8.0),
child: Container(
width: 400,
height: 120,
child: Form(
autovalidate: true,
child: TextFormField(
autofocus: true,
validator: (val) {
if (val.trim().length > 200)
return "Beschrijving te lang";
else
return null;
},
maxLines: 100,
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.white,
labelText: "",
labelStyle: TextStyle(fontSize: 15.0),
hintText: "Enter a message",
),
),
),
),
)
Output:
in mycase this is how i solved it.
you could ommit the keyboardType: TextInputType.multiline, in order to allow one to move to the next line.(enter)
TextFormField(
keyboardType: TextInputType.multiline,
controller: _description,
maxLines: 10,
decoration: InputDecoration(
hintMaxLines: 10,
hintText: "description",
labelText: "Description",
hintStyle: hintText),
),
I'm trying to putting the country code before the phone number.
I usedcountry_pickers package but something gone wrong with my code,
my TextField's hintText visibility has gone, it's showing nothing
here is my widget
Padding(
padding: const EdgeInsets.only(top: 5.0),
child: new Container(
padding: const EdgeInsets.only(left: 10.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(5.0)),
border: Border.all(color: Colors.blue)
),
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
prefix: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
onChanged: (value){
this.phoneNo=value;
},
),
),
),
here's widget method for country code
Widget _buildDropdownItem(Country country) => Container(
child: Row(
children: <Widget>[
CountryPickerUtils.getDefaultFlagImage(country),
SizedBox(
width: 8.0,
),
Text("+${country.phoneCode}(${country.isoCode})"),
],
),
);
The right way to use this is in Row widget. Prefix won't work here.
Row(
children: <Widget>[
Expanded(
child: CountryPickerDropdown(
initialValue: 'in',
itemBuilder: _buildDropdownItem,
onValuePicked: (Country country) {
print("${country.name}");
},
),
),
Expanded(
child: TextField(
keyboardType: TextInputType.phone,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Phone Number",
),
onChanged: (value) {
// this.phoneNo=value;
print(value);
},
),
),
],
),