I want to change the decoration of TextField when the onSubmitted method called, in setState when I called my function for returning InputDecoration, it doesn't change the decoration of TextField.
Actually I want to check whether user filling the TextField correctly or not, if not warned them by changing the decoration of TextField.
class CustomTextField extends StatefulWidget {
final TextEditingController controller;
final IconData icon;
final String textLabel;
final TextInputType textInputType;
CustomTextField(
this.controller, this.icon, this.textLabel, this.textInputType);
@override
_CustomTextFieldState createState() => _CustomTextFieldState();
}
class _CustomTextFieldState extends State<CustomTextField> {
InputDecoration inputDecoration;
double a = 0;
bool b = true;
@override
Widget build(BuildContext context) {
inputDecoration = noramlInputDecoration(context, widget.textLabel, Icon(widget.icon));
return Container(
margin: EdgeInsets.only(top: responsiveHeight(context, 0.8)),
child: TextField(
onSubmitted: (mahdi) {
print('adfaf');
setState(() {
inputDecoration = noramlInputDecoration(
context, widget.textLabel, Icon(widget.icon));
});
a++;
print(a);
},
decoration: inputDecoration,
onTap: () {},
toolbarOptions: ToolbarOptions(
paste: true,
copy: true,
cut: true,
selectAll: true,
),
cursorWidth: 2,
style: TextStyle(
fontSize: responsiveWidthGivenWidth(
responsiveWidth(context, 81.6) / 10, 53.3),
height: 0.5),
controller: widget.controller,
maxLines: 1,
obscureText: b,
showCursor: true,
textAlign: TextAlign.end,
textDirection: TextDirection.ltr,
keyboardType: widget.textInputType,
inputFormatters: [],
),
);
}
}
and here are my two method for returning InputDecoration.
InputDecoration errorInputDecoration(
BuildContext context, IconData icon, String hintText, String errorText) {
InputDecoration inputDecoration;
inputDecoration = InputDecoration(
suffixIcon: Padding(
padding: EdgeInsets.only(
right: responsiveWidthGivenWidth(responsiveWidth(context, 81.6), 5.2),
),
child: Icon(
icon,
color: blue,
),
),
hintText: hintText,
errorText: errorText,
errorMaxLines: 2,
errorStyle: TextStyle(
color: Colors.red,
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide(
color: Colors.red,
width: 2,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide(
color: Colors.red,
width: 4,
),
),
);
return inputDecoration;
}
InputDecoration noramlInputDecoration(
BuildContext context, String hintText, Icon icon) {
return InputDecoration(
suffixIcon: Padding(
padding: EdgeInsets.only(
right: responsiveWidthGivenWidth(responsiveWidth(context, 81.6), 5.2),
),
child: Icon(
icon.icon,
color: blue,
),
),
hintText: hintText,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: BorderSide(
color: Colors.blue[200],
width: 2,
),
),
);
}
Solution 1: Mahdi Rezaei
As @Ryosuke said in the comment of the question, I shouldn't use setState() in the build method because every time it called and it stuck in loop and always called build() method.