CODEWITHSUNDEEP
flutterdartflutter-layout
Aishwarya
Aishwarya

Reputation: 657

Enable/ disable a raisebutton according to the textform field in flutter

I want to enable a button when the textformfield is not empty and disable a button when the textformfield is empty.

bool isEnabled = false;
  TextEditingController _textEditingController = TextEditingController();
RaisedButton(
                // disabledColor: Colors.grey,
                child: Text("Click"),
                onPressed: () {
                  setState(() {
                    if (_textEditingController.text.isNotEmpty) {
                      isEnabled = true;
                    } else
                      isEnabled = false;
                  });
                })

Upvotes: 0

Views: 1221

Answers (3)

Till Fitzke
Till Fitzke

Reputation: 1

I tested the accepted answer and at least in my case this solution did not work: The setState rebuilds the screen and therefore I always get an empty TextField.

What you can do is wrap the Button in a Listener:

        ValueListenableBuilder<TextEditingValue>(
          valueListenable: _textEditingController,
          builder: (context, value, child) {
            RaisedButton(
            child: Text("Click"),
              onPressed: value.text.isNotEmpty
                  ? () {
                    }
                  : null,
            );
          },
        ),

The Widget does as expected: It listens to your TextEditingController changes and then rebuilds the button.

Upvotes: 0

israel gabice
israel gabice

Reputation: 21

Here's example that answers your question. It also changes the color of the button to indicate disabled or other wise.

bool isEnabled = false;
//Initialize a button color variable
Color btnColor = Colors.grey;

...

TextFormField(
        onChanged: (text) {
            setState(() {
              if(text.length>0)
                 {
                  isEnabled=true;
                 btnColor = Colors.blue; //update active colour
           }   else{
                 isEnabled=false;
                 btnColor = Colors.grey; //update active colour
            }
          });
        }

RaisedButton(
            color: btnColor,
            disabledColor: Colors.grey,
            child: Text("Click"),
            onPressed:  isEnabled?
(){
 //do something
} 
: null;

)

Upvotes: 0

Ravinder Kumar
Ravinder Kumar

Reputation: 8010

Right now, what you are doing is wrong, because you can not enable a disabled button using onPressed.

It should be done like, Inside TextFormField, set value of isEnabled to true is input text length is greater than zero, false otherwise.

        TextFormField(
            onChanged: (text) {
                setState(() {
                  if(text.length>0)
                     isEnabled=ture;
                  else
                     isEnabled=false;
                  });
            }

and then disable/enable button like this,

onPressed: isEnabled?
    (){
     //do something
   } 
: null;// or pass blank (){}

Upvotes: 3

Related Questions