Search code examples
buttonfluttertextfieldtxtextcontrol

how to turn disabled button into enabled button depending on conditions


I'm new to flutter and I'm trying to make a button disabled as long as some text fields are empty, so i made 3 textcontrollers to act as a controller for the 3 text fields and i made a function to check the function is:

bool isEmpty(){
    setState(() {
          if(textEditingController.text!=" "&&textEditingController2.text!=" "&& textEditingController3.text!=" "){
            isButtonEnabled=true;


          }
        });
       return isButtonEnabled; 
  }

And the code for the text field is:

TextField(
                  onSubmitted:null,

                  controller: textEditingController3,


                )

Then i write the code for the button as follows: Center(

  child: RaisedButton(
         child: Text("Button 1",style: TextStyle(color:Colors.white),),
          onPressed:isButtonEnabled?(){ print("enabled");}:null,
          color: Colors.red,

            ),

The problem is the button remains disabled even after i write in the text fields. Any idea? Thanks in advance. EDIT: thanks to @diegoveloper answer this worked, but what if i wanted to put intital value and i want the button to be enabled only if the text fields have values for the text fields as following :

@override
  void initState() {
    super.initState();
   textEditingController  = new TextEditingController(text: name);
      textEditingController2  = new TextEditingController(text: email);
         textEditingController3  = new TextEditingController(text: " place");


  }

Then i updated the isEmpty method to be:

bool isEmpty(){
    setState(() {
          if((textEditingController.text!=" ")&&(textEditingController2.text!=" ")&& (textEditingController3.text!=" ")&&(textEditingController!=null)&&(textEditingController2!=null)&&(textEditingController3!=null)){
            isButtonEnabled=true;



          }
          else{
                        isButtonEnabled=false;

          }
        });
       return isButtonEnabled; 
  }

The problem is despite of the intials values i gave to text fields the button is still disabled, also when i edit the 3 values of textfields the button is enabled, but if i deleted the text (in which i think it's meant by null) the button is still disabled.


Solution

  • You could read more about TextField here: https://flutter.io/cookbook/forms/text-field-changes/

    So you have two options :

    1 - Listen for changes on each TextEditingController and call to your method isEmpty()

    2 - Add the onChanged callback on each TextField you want to listen the changes.

    Option 2

    TextField(
      onSubmitted: null,
      onChanged: (val) {
        isEmpty();
      },
      controller: textEditingController3,
    )
    

    Note: don't forget to add the ELSE condition to your isEmpty method.

    Edit

    Modify your initState method to check if your button is enable (refactor this code please)

    @override
    void initState() {
        super.initState();
    
        textEditingController = TextEditingController(text: "name");
        textEditingController2 = TextEditingController(text: "email");
        textEditingController3 = TextEditingController(text: "place");
    
        if ((textEditingController.text.trim() != "") && (textEditingController2.text.trim() != "") && (textEditingController3.text.trim() != "")) {
            isButtonEnabled = true;
        } else {
            isButtonEnabled = false;
        }
    }