How to do ElevatedButton disabled?

Question

I want the button to be inactive until 10 characters are entered in the field. When 10 characters were entered, the button was active. And when it is inactive it is gray, and when it is active it is blue. How can I do that? Here is the input code with the button:

      Widget build(BuildContext context) {
        return Scaffold(
          body: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Padding(
              padding: EdgeInsets.fromLTRB(
                  20, MediaQuery.of(context).size.height * 0, 20, 0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    onChanged: (String value) {
                      setState(() {
                        _showIcon = value.isNotEmpty;
                      });
                    },
                    controller: _inputController,
                    decoration: InputDecoration(
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.black, width: 2.0),
                      ),
                      hintText: "(1201) 565-0123 ",
                      hintStyle: TextStyle(color: Colors.grey, fontSize: 15),
                      helperText: 'Enter your phone number',
                      helperStyle: TextStyle(color: Colors.grey, fontSize: 15),
                      suffixIcon: _showIcon
                          ? IconButton(
                        onPressed: () {
                          setState(() {
                            _inputController.clear();
                            _showIcon = false;
                          });
                        },
                        icon: const Icon(Icons.close, color: Colors.grey),
                      ) : null,
                    ),
                    keyboardType: TextInputType.number,
                    inputFormatters: [maskFormatter],
                  ),
                 Row(
                   mainAxisAlignment: MainAxisAlignment.end,
                   children: [
                     ElevatedButton(
                         onPressed: () {
                           
                         },
                         child: const Icon(Icons.arrow_forward_rounded, size: 25),
                       style: ElevatedButton.styleFrom(
                           shape: CircleBorder(),
                           padding: EdgeInsets.all(15)
                       )
                     ),
                   ],
                 )
                ],
              ),
            ),
          ),
        );
      }
    }

Answer 1

Use a variable like isEnabled and passing null to the onPress function will disable the button.

bool isEnabled=false;
void callbackfunction(){
   // add your logic here.
}
....
....
 TextField(
                onChanged: (String value) {
                  if (value.length == 10){
                       setState(()=> isEnabled = true;)
                  }
                  else{
                      isEnabled=false;
                  }
                  setState(() {
                    _showIcon = value.isNotEmpty;
                  });
                },
....
  Row(
               mainAxisAlignment: MainAxisAlignment.end,
               children: [
                 ElevatedButton(
                     onPressed: isEnabled ? callbackfunction : null,
                     child: const Icon(Icons.arrow_forward_rounded, size: 25),
                   style: ElevatedButton.styleFrom(
                       color: isEnabled ? Colors.blue : Colors.grey,
                       shape: CircleBorder(),
                       padding: EdgeInsets.all(15)
                   )
                 ),
               ],
             )
            ],
          ),

P.S Please check the syntax I have just provided you the concept.

Answer 2

You can call setState(() {}); on onChanged to update the UI, or add listener on _inputController.

ElevatedButton(
    onPressed:
        _inputController.text.length < 10 ? null : () {},
...

Passing onPressed:null will provide disable state.

Updating UI can be done

TextField(
  onChanged: (String value) {
    setState(() {});
  },
....)

Or

late final TextEditingController _inputController;

@override
void initState() {
  super.initState();
  _inputController = TextEditingController()
    ..addListener(() {
      setState(() {});
    });
}