After clear text in TextFormField below code:
Widget _textInputNumber({controller, name, enable, autofocus, required}) {
return TextFormField(
autofocus: autofocus,
keyboardType: TextInputType.number,
enabled: enable,
controller: controller,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
suffix: InkWell(
onTap: () {
controller.text = '';
setState(() {});
},
child: const Icon(
Icons.clear,
),
),
),
validator: required
? (value) => value!.isEmpty ? 'Required!' : null
: null,
onSaved: (value) => name = value,
);
}
Cursor is focused but not accepted input text I need again click on focused input to enter new text.
Any solution?
you can solve issue by calling this code FocusScope.of(context).requestFocus(FocusNode())
Here's the full code:
Widget _textInputNumber({controller, name, enable, autofocus, required}) {
return TextFormField(
autofocus: autofocus,
keyboardType: TextInputType.number,
enabled: enable,
controller: controller,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
suffix: InkWell(
onTap: () {
controller.text = '';
setState(() {});
FocusScope.of(context).requestFocus(FocusNode());
},
child: const Icon(
Icons.clear,
),
),
),
validator: required
? (value) => value!.isEmpty ? 'Required!' : null
: null,
onSaved: (value) => name = value,
);
}
Related
TextFormField function in flutter
A FormField that contains a TextField.
This is a convenience widget that wraps a TextField widget in a FormField.
static formField({
required String label,
String? initialValue,
FormFieldSetter? onSaved,
ValueChanged? onChanged,
Icon? icon,
int? maxLines,
TextEditingController? controller,
TextInputType? keyboard,
}) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
child: TextFormField(
validator: (value) {
if (value!.isEmpty) {
return 'please type the $label above';
}
},
initialValue: initialValue,
controller: controller,
maxLines: maxLines,
onChanged: onChanged,
onSaved: onSaved,
keyboardType: keyboard,
decoration: InputDecoration(
label: Text(label),
prefixIcon: icon,
hintText: 'Type $label here',
border: const OutlineInputBorder(),
),
),
);
}
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
child: Container(
child: TextFormField(
validator: (value) {
if (value!.isEmpty) {
return 'please type the $label above';
}
},
initialValue: initialValue,
controller: controller,
maxLines: maxLines,
onChanged: onChanged,
onSaved: onSaved,
keyboardType: keyboard,
decoration: InputDecoration(
label: Text(label),
prefixIcon: icon,
hintText: 'Type $label here',
border: const OutlineInputBorder(),
),
),
),
);
i think this will work... wrap the TextFormField inside the container.. if there is any wrong syntax change it
Here I have added a stepper to insert price for a added product in the app. But is there any way I can check whether he actually added a price or something else. I'm kind of new to programming, so please help me.
Container(
width: 150.0,
child: TextFormField(
initialValue: widget.update ? order.price.toString() : null,
autocorrect: false,
onSaved: (String value) {
price = int.parse(value);
},
decoration: new InputDecoration(
labelText: "Price",
hintText: 'Price',
prefixText: "Rs.",
),
),
)
,
You can use both keyboardType: TextInputType.number and validator property in dart.
Container(
width: 150.0,
child: TextFormField(
initialValue: widget.update ? order.price.toString() : null,
autocorrect: false,
onSaved: (String value) {
price = int.parse(value);
},
validator: (value) {
if (value.isEmpty ||
!new RegExp(r'^[0-9]+$').hasMatch(value)) {
return 'Please enter valid price';
}
},
decoration: new InputDecoration(
labelText: "Price",
hintText: 'Price',
prefixText: "Rs.",
),
keyboardType: TextInputType.number,
),
),
Refer this - https://flutter.dev/docs/cookbook/forms/validation
Add this parameter to your TextFormField: keyboardType: TextInputType.number,. So that user can only type in number. Example:
Container(
width: 150.0,
child: TextFormField(
initialValue: widget.update ? order.price.toString() : null,
autocorrect: false,
keyboardType: TextInputType.number,//this is the added line
onSaved: (String value) {
price = int.parse(value);
},
decoration: new InputDecoration(
labelText: "Price",
hintText: 'Price',
prefixText: "Rs.",
),
),
)
Not sure what I'm missing. When selecting the value of drop-down, form onVaidate() fired which hence my other fields are showing the error. How can I stop it? Here is the code
Widget build(BuildContext context) {
// return Scaffold(
// appBar: AppBar(title: Text("Registration")),
// body: Center(child: Text(widget.user.displayName)),
// );
FirebaseUser user = widget.user;
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: Text("Registration"),
),
body: SafeArea(
top: false,
bottom: false,
child: Form(
key: _formKey,
autovalidate: true,
child: ListView(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
children: <Widget>[
TextFormField(
validator: (value) => value.isEmpty ? 'Name is Required' : null,
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Enter your first and last name',
labelText: 'Name',
),
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.phone),
hintText: 'Enter a phone number',
labelText: 'Phone',
),
initialValue: user.phoneNumber,
enabled: user.phoneNumber == null,
keyboardType: TextInputType.phone,
validator: (value) => value.isEmpty ? 'Phone number is Required' : null
// inputFormatters: [
// WhitelistingTextInputFormatter.digitsOnly,
// ],
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.email),
hintText: 'Enter a email address',
labelText: 'Email',
),
initialValue: user.email,
enabled: user.email == null,
validator: (value) => value.isEmpty ? 'Email is Required' : null,
keyboardType: TextInputType.emailAddress,
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.remove_red_eye),
hintText: 'Enter the Password',
labelText: 'Password',
),
keyboardType: TextInputType.text,
obscureText: true,
validator: (value) => value.isEmpty ? 'Password is Required' : null
),
FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.card_membership),
labelText: 'ID Type',
),
isEmpty: _profile.govId == null,
child: DropdownButtonHideUnderline(
child: DropdownButton(
value: _profile.govId,
isDense: true,
onChanged: (String newValue) {
setState(() {
_profile.govId = newValue;
state.didChange(newValue);
});
},
items: _govtIds.map((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
),
),
);
},
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.confirmation_number),
hintText: 'Enter your Governmenr ID number',
labelText: 'ID Number',
),
keyboardType: TextInputType.datetime,
validator: (value) => value.isEmpty ? 'ID Number is Required' : null
),
FormField(
builder: (FormFieldState state) {
return InputDecorator(
decoration: InputDecoration(
icon: const Icon(Icons.business),
labelText: 'Block Info',
),
isEmpty: _profile.block == null,
child:
// Column(children: [RadioListTile(title: Text("A")),RadioListTile(title: Text("B"))]),
// Radio(
// value: 0,
// groupValue: _blocks,
// onChanged: (value){}),
DropdownButtonHideUnderline(
child:
DropdownButton(
value: _profile.block,
isDense: true,
onChanged: (String newValue) {
setState(() {
_profile.block = newValue;
state.didChange(newValue);
});
},
items: _blocks.map((String value) {
return DropdownMenuItem(
value: value,
child: Text(value),
);
}).toList(),
),
),
);
},
),
TextFormField(
decoration: const InputDecoration(
icon: const Icon(Icons.home),
hintText: 'Enter your Flat number',
labelText: 'Flat number',
),
inputFormatters: [LengthLimitingTextInputFormatter(3)],
validator: (value) {
if (value.isEmpty) {
return 'Flat number is Required';
} else if (_profile.isValidHouseNumber() == false) {
return 'Invalid flat number';
} else {
return null;
}
},
keyboardType: TextInputType.number,
onChanged:(value) {
_profile.houseNo = value;
},
),
Padding(
padding: EdgeInsets.fromLTRB(38.0, 30.0, 0.0, 0.0),
child: SizedBox(
height: 50.0,
child: FlatButton(
// elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
color: Colors.green,
child: Text('Submit',
style: TextStyle(fontSize: 20.0, color: Colors.white)),
onPressed: _validateAndSubmit,
),
))
],
))),
);
}
Call a method to return null in the validate fucntion all the other fields. That will clear the validation. It's a fix, but doesn't solve the problem.
There seems to be nothing wrong with the code above, can you add the code for the other fields too?
EDIT:
The reason all the other fields validate is because of the autovalidate: true property of the parent Form widget. Remove it and wrap each TextFormField with a Form with different keys.
For example, your TextFormField should look as follows:
Form(
key: _formKey[0],
child: TextFormField(
validator: (value) => value.isEmpty ? 'Name is Required' : null,
decoration: const InputDecoration(
icon: const Icon(Icons.person),
hintText: 'Enter your first and last name',
labelText: 'Name',
),
),
),
Wrap it with a Form, _formKey is declared as
List<GlobalObjectKey<FormState>> _formKey = new List(number_of_keys);
Call the respective setState like so:
_formKey[position].currentState.setState((){});
And don't forget to remove the parent Form widget.
How to make the counter and text on the same line or same row? when i use maxlength the counter appear below the textfield.
Widget _nameTextField(String hintText) {
return TextFormField(
controller: TextEditingController(
text: _template.name,
),
decoration: InputDecoration(
hintText: hintText,
contentPadding: EdgeInsets.all(15)
),
cursorRadius: Radius.circular(10),
keyboardType: TextInputType.text,
autofocus: true,
maxLength: 40,
// maxLengthEnforced: true,
validator: (val) {
if (val.isEmpty) {
return 'Please enter text.';
}
return null;
},
onChanged: (val) {
_template.name = val;
print(val);
},
);
}
Add suffix text and suffixstyle to your input decoration. Like this
Widget _nameTextField(String hintText) {
return TextFormField(
controller: TextEditingController(
text: _template.name,
),
decoration: InputDecoration(
hintText: hintText,
contentPadding: EdgeInsets.all(15),
suffixText: '11/40',
suffixStyle: TextStyle(color: Colors.white)
),
cursorRadius: Radius.circular(10),
keyboardType: TextInputType.text,
autofocus: true,
maxLength: 40,
// maxLengthEnforced: true,
validator: (val) {
if (val.isEmpty) {
return 'Please enter text.';
}
return null;
},
onChanged: (val) {
_template.name = val;
print(val);
},
);
}
Fixed the problem. by adding suffix and setstate to update the value when tying.
Widget _nameTextField(String hintText) {
int nameLength = _template.name.length;
return TextFormField(
controller: TextEditingController(
text: _template.name,
),
decoration: InputDecoration(
hintText: hintText,
contentPadding: EdgeInsets.all(15),
suffixText: nameLength.toString() + "/ 40",
suffixStyle: TextStyle(color: Colors.grey),
counterText: "",
),
cursorRadius: Radius.circular(10),
keyboardType: TextInputType.text,
autofocus: true,
maxLength: 40,
validator: (val) {
if (val.isEmpty) {
return 'Please enter text.';
}
return null;
},
onChanged: (val) {
_template.name = val;
setState(() {
nameLength = _template.name.length;
});
print(val);
},
);
}
I have problem with flutter textformfield. Like I said in title my app show cursor in two textformfield. It appear when I tap previous textfield. I'm using real phone for test, not tried in emulator. Thanks for any help.
Here image from my app:
enter image description here
Form(
key: _formKey,
child: Column(
children: <Widget>[
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
focusNode: _emailFocus,
onFieldSubmitted: (term) {
_passwordFocus.nextFocus();
_fieldFocusChange(
context, _emailFocus, _passwordFocus);
},
textInputAction: TextInputAction.next,
validator: (value) =>
value.isEmpty ? 'Enter an email' : null,
onChanged: (value) {
setState(() => email = value);
},
),
SizedBox(
height: 20.0,
),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
validator: (value) => value.length < 6
? 'Enter an password 6+ chars long'
: null,
obscureText: true,
focusNode: _passwordFocus,
onFieldSubmitted: (term) {
_passwordFocus.unfocus();
_submitForm();
},
textInputAction: TextInputAction.done,
onChanged: (value) {
setState(() => password = value);
},
),
SizedBox(
height: 20.0,
),
RaisedButton(
color: Theme.of(context).primaryColor,
child: Text('Sign in'),
onPressed: () {
_submitForm();
},
),
SizedBox(height: 12.0),
Text(error,
style:
TextStyle(color: Colors.red, fontSize: 14.0)),
],
)),
I found solution from this question:
Multiple cursor in form's TextFormField flutter
It is same as mine. We did same mistake. When I declare FocusNode global it solve problem.