0
After componentization of a Textfield from the login page, the color changes (fillColor and labelStyle) do not work properly.
The main class login_view calls the Component (Textfieldcomponent).
// EMAIL
TextFieldComponent(true, TextInputType.emailAddress, Icon(Icons.email), 'Email'),
SizedBox(height: 10),
// PASSWORD
TextFieldComponent(false, TextInputType.visiblePassword, Icon(Icons.lock), 'Password'),
SizedBox(height: 15),
Textfieldcomponent class:
class _TextFieldComponentState extends State<TextFieldComponent> {
bool indication;
TextInputType keyboard;
Icon icon;
String title;
_TextFieldComponentState(this.indication, this.icon, this.keyboard, this.title);
@override
Widget build(BuildContext context) {
return TextField(
keyboardType: keyboard,
style: TextStyle(color: Colors.black, fontSize: 20, fontWeight: FontWeight.bold),
decoration: InputDecoration(
prefixIcon: icon,
enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(15))),
labelText: title,
filled: true,
fillColor: Controller(indication).getItem() == false ? (Colors.indigo[600]) : (Colors.white),
labelStyle: TextStyle(color: Controller(indication).getItem() == false ? (Colors.white) : (Colors.black)),
),
// CHANGE COLOR WHEN TAP
onTap: () {
setState(() {
Controller(indication).mudarCor();
});
},
);
}
}
The variable Indication serves to indicate if Textfield will be Email (true), or Password (false). Thus you will have the last class that will make the color changes, and the variables, Controller():
bool indication;
bool emailColor = false;
bool passwordColor = false;
Controller(this.indication);
mudarCor() {
if (indication == true) {
emailColor = true;
passwordColor = false;
} else {
emailColor = false;
passwordColor = true;
}
}
getItem() {
if (indication == true) {
return emailColor;
} else {
return passwordColor;
}
}
}
The goal is when you click on a textField, the selected textField(email) fillColor will turn white, and the other textField(password) will return to its normal color, and vice versa:
fillColor: Controller(indication).getItem() == false ? (Colors.indigo[600]) : (Colors.white),
Same thing with Labelstyle:
labelStyle: TextStyle(color: Controller(indication).getItem() == false ? (Colors.white) : (Colors.black)),
But colors aren’t changing, they stay static, as if setState didn’t work.