Textfield componentization with color changes

Asked

Viewed 22 times

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.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.