How to reset the error state of a TextField in Flutter? - flutter

I have a flutter TextField which is not embedded in a Form. I want to show and hide an error message, and also have the TextField move in and out of an error state.
When I set the errorMessage property on the TextField it correctly shows the error message and the TextField is given a redline under it to show it's in an error state.
But when I set the error message to null, the error message disappears as expected, but the TextField continues to show a red line under it.
How do I reset the error state of the TextField so it doesn't show the red line under it?
Here is my code.
class _EmailTextFieldState extends State<EmailTextField> {
static const borderColor = Color.fromARGB(255, 84, 160, 246);
#override
Widget build(BuildContext context) {
return BlocBuilder<CustomLoginScreenBloc, CustomLoginScreenState>(
builder: (context, state) {
return Padding(
padding: const EdgeInsets.fromLTRB(30, 30, 30, 20),
child: TextField(
onChanged: (text) {
context
.read<CustomLoginScreenBloc>()
.add(EmailTextChanged(email: text));
},
style: const TextStyle(fontSize: 14),
obscureText: false,
decoration: InputDecoration(
// icon: Icon(Icons.email_outlined),
prefixIcon: const Icon(Icons.email_outlined),
filled: true,
fillColor: const Color.fromRGBO(238, 244, 251, 1),
errorText: state.validationErrorMessage,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide(
color: borderColor, width: 0.1, style: BorderStyle.solid),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide(
color: borderColor, width: 0.5, style: BorderStyle.solid),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide(
color: borderColor, width: 0.1, style: BorderStyle.solid),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
borderSide: BorderSide(
color: borderColor, width: 0.1, style: BorderStyle.solid),
),
labelText: 'email'),
),
);
});
}
}

Related

how to make padding between textfield

enter image description herei want make padding betwenn this
Container(
child: Column(
children: \<Widget\>\[
// Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
// Expanded(
// child: Text('A domicile'),
// ),
// Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
// Expanded(
// child: Text('En consigne'),
// ),
TextField(
decoration: InputDecoration(
labelText: ' Ref Expedéteur',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Nombre de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Poids',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: const Color(0xffff4848),
),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Taille de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
// Padding(padding: const EdgeInsets.all(2.0),
// child:Column(
// children: \[
// Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
// Expanded(
// child: Text('Paye'),
// ),
// \],
// ),
// ),
TextField(
decoration: InputDecoration(
labelText: ' Ref Expedéteur',
labelStyle: TextStyle(
color: Color.fromARGB(255, 5, 5, 5),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Nombre de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Poids',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Taille de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
this is my code its work in side padding but i want padding inside text field
im begginner in flutter
this is my code its work in side padding but i want padding inside text field im begginner in flutter
this is my code its work in side padding but i want padding inside text field im begginner in flutter
\],
),
),
What do you mean by padding inside TextField? The padding inside the TextFields looks right to me, maybe you were trying to say that you want to add some kind of spacing between the TextFields? If that's the case, you have multiple options, I find this one the simplest one:
TextField(...)
SizedBox(height: 12)
TextField(...)
SizedBox(height: 12)
...
You get the idea...
I would also recommend you to extract those TextField widgets into a private widget that receives X number of parameters, this way you avoid repeating so much code and everything would look cleaner and more readable.
Something like:
class _CustomTextField extends StatelessWidget {
const _CustomTextField({
Key? key,
required this.label,
}) : super(key: key);
final String label;
#override
Widget build(BuildContext context) {
return TextField(
decoration: InputDecoration(
labelText: label,
labelStyle: const TextStyle(
color: Color.fromARGB(255, 5, 5, 5),
fontFamily: 'Segoe UI',
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136),
),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(width: 3, color: Color(0xffff4848)),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145),
),
),
),
);
}
}
And then you use it like this:
_CustomTextField(label: 'Label 1')
SizedBox(height: 12)
_CustomTextField(label: 'Label 2')
SizedBox(height: 12)
...
You can even try to add the SizedBox inside the _CustomTextField!
wrap every TextField widget with a Container widget, and specify the margins and padding you want like this :
Container(
margin: EdgeInsets.symmetric(vertical: 10.0), // 10 vertical margin
TextField(
decoration: InputDecoration(
labelText: ' Taille de colis',
labelStyle: TextStyle
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),),),
If you want inside padding in TextField then you can use "contentpadding" inside InputDecoratation(contentPadding : EdgeInseta.all(6))
TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: 'Enter Something',
contentPadding: EdgeInsets.all(20.0),
),
)
And you want around of TextField or TextFormField then you can Wrap with Padding Widget example.
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
autofocus: false,
enableSuggestions: true,
autocorrect: true,
style: const TextStyle(
fontFamily: fontFamilySourceSansPro, color: black, fontSize: 16),
validator: validateCustomerAddress,
controller: _cusAdd2,
focusNode: _nodeCusAdd2,
autovalidateMode: autoValidateMode,
keyboardType: TextInputType.streetAddress,
textInputAction: TextInputAction.next,
decoration: getTextFieldBorderLightGrayDecoration("Address 2*"),
),
);

Passing a function in onChanged Flutter

I'm having these 4 inputs (TextFormFields) , and I want to handle a change that whenver the user changes what is written inside , a function is triggered and updates the sum of another TextFormField.
I thought using the onChanged is the best way to handle these changes , but I'm unable to make it.
I have a TextEditingController that I want to update whenever there is a change in the inputs :
TextEditingController totalDocument;
void _CalculTotal() {
setState(() {
total = total + double.tryParse(widget.controllers.last.text);
totalDocument.text = total.toString();
});
}
These are my inputs inside a class :
class InputRefNomProduit extends StatefulWidget {
final String label, label2, label3, label4;
final String content, content2, content3, content4;
var fieldController = TextEditingController();
var fieldController2 = TextEditingController();
var fieldController3 = TextEditingController();
var fieldController4 = TextEditingController();
final FunctionStringCallback Prix;
FormFieldValidator<String> fieldValidator = (_) {};
InputRefNomProduit(
{this.label,
this.content,
this.label2,
this.content2,
this.label3,
this.content3,
this.label4,
this.content4,
this.fieldController,
this.fieldController2,
this.fieldValidator,
this.fieldController3,
this.fieldController4,
**this.Prix**});
. . .
Expanded(
flex: 3,
child: Container(
width: MediaQuery.of(context).size.width / 3.7,
color: Color.fromARGB(255, 255, 255, 255),
child: TextFormField(
**onChanged: widget.Prix,**
enabled: true,
controller: widget.fieldController4,
validator: widget.fieldValidator,
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
hintText: "${widget.content4}",
hintStyle: TextStyle(
color: Color.fromARGB(255, 190, 190, 190),
fontSize: 14),
fillColor: Color.fromARGB(255, 0, 0, 0),
),
),
),
),
The variable Prix is used to get the function _CalculTotal().
This is my sum TextFormField that will hold the total :
SizedBox(
width: 200,
child: Padding(
padding: const EdgeInsets.only(top: 15),
child: TextFormField(
**controller: totalDocument,**
keyboardType: TextInputType.text,
decoration: InputDecoration(
enabled: false,
hintText: '$total',
hintStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w400,
color: Colors.grey.shade400,
),
prefixIcon: Icon(
Icons.attach_money_outlined,
color: Colors.grey.shade400),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: Colors.grey.shade200),
borderRadius:
BorderRadius.circular(5),
),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: Colors.grey.shade200),
borderRadius:
BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(5),
borderSide: BorderSide(
color: Colors.grey.shade400,
width: 1,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(5),
borderSide: BorderSide(
color: Colors.grey.shade400,
width: 1,
),
),
errorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(5),
borderSide: BorderSide(
color: Colors.grey.shade400,
width: 1,
),
),
contentPadding:
EdgeInsets.fromLTRB(15, 0, 15, 0),
),
),
),
),
Use the addListener() method of your TextEditingController to listen to changes in the TextFormFields where you assigned your TextEditingController as a controller.
Checkout this flutter cookbook article for more details. It clearly explains the difference between setting the onChanged attribute of a TextFormField and using the addListener() of a controller to handle changes in your TextFields.
https://docs.flutter.dev/cookbook/forms/text-field-changes

flutter convert text field code in class and constructor for state less widget

I am new to flutter.
I want to convert Text Field widget in
class as like below syntax.
class MyTextField extends StatelessWidget {
for below code.
Thanks in advance
TextField(
style: TextStyle(fontSize: 40),
decoration: InputDecoration(
hintText: "enter email",
fillColor: Colors.white24,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.blue,
style: BorderStyle.solid,
width: 4)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
style: BorderStyle.solid,
width: 4)),
)),
I'm not exactly sure what you want to do but if I've understood your question you want to put the default Material TextField into your own custom widget called MyTextField. You can do this by putting your existing code inside the build method of MyTextField like below:
class MyTextField extends StatelessWidget {
#override
Widget build(BuildContext context) {
return TextField(
style: TextStyle(fontSize: 40),
decoration: InputDecoration(
hintText: "enter email",
fillColor: Colors.white24,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.blue, style: BorderStyle.solid, width: 4)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white, style: BorderStyle.solid, width: 4)),
),
);
}
}
If you want to add parameters like a changable value for the hint text you can do so like below:
class MyTextField extends StatelessWidget {
final String hint;
final InputBorder enabledBorder;
MyTextField({this.hint, this.enabledBorder});
#override
Widget build(BuildContext context) {
return TextField(
style: TextStyle(fontSize: 40),
decoration: InputDecoration(
hintText: hint,
fillColor: Colors.white24,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.blue, style: BorderStyle.solid, width: 4)),
enabledBorder: enabledBorder,
);
}
}
and then you can use the widget like:
MyTextField(
hint: "enter email",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
style: BorderStyle.solid,
width: 4,
),
),
);

Flutter TextFormField inpy border color not chaning

I am trying to change the color of input border but its not changing. Only the color change when its on focus but normally its not changing the color
Code
Container(
height: Height * 0.08,
width: Width * 0.9,
child: TextFormField(
style: TextStyle(
fontSize: 15,
color: Color(0xff04385f),
fontFamily: 'UbuntuRegular'),
decoration: new InputDecoration(
border: new OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.red, width: 1.25),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
filled: true,
hintStyle: new TextStyle(
color: Colors.grey[800],
fontFamily: 'UbuntuRegular'),
hintText: "Username",
fillColor: Colors.white70,
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Color(0xff04385f), width: 1.25),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
),
As you can see i define red color on inputborder but its showing some dark grey color
add enabledColor:
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(
color: Colors.red, width: 1.25),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),

flutter : How to change error position in TextFormField

I am using form and TextFormField to get data from user :
child: TextFormField(
keyboardType: TextInputType.number,
enabled: item.editable,
autofocus: false,
maxLines: 1,
textAlign: TextAlign.right,
controller: TextEditingController()
..text = item.value == null
? ""
: replaceFarsiNumber(
item.value.substring(3, 5)),
validator: (val) {
if (val.length < 2) {
return "دورقمی وارد کنید";
}
return null;
},
onChanged: (_) => _form.currentState.validate(),
decoration: InputDecoration(
labelText: "دقیقه",
labelStyle:
TextStyle(color: color_raisedButton_active),
errorStyle: TextStyle(height: 0),
border: OutlineInputBorder(
borderSide: BorderSide(
color: color_raisedButton_active,
width: 1.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: color_raisedButton_active,
width: 1.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: color_raisedButton_active,
width: 1.0),
),
errorBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.red, width: 1.0),
),
contentPadding: EdgeInsets.only(
left: 5.0,
top: 0.0,
right: 5.0,
bottom: 0.0),
),
),
I add a validator to count number of word that user added to TextFormField. under some situation i want to show error like this to user:
How can i change the error label position to below of TextFormField