I'm trying to implement the functionality of disabling a button. Until 10 characters are entered in the field, it is gray and disabled, when there are 10 characters in the field, it turns blue and causes an alert. But for some reason this example does not work. Can someone suggest why?

final TextEditingController _inputController = TextEditingController();
  bool _showIcon = false;
  bool isEnabled = false;

  // show alert on click
  void callbackfunction(){
    AlertDialog alert = AlertDialog(
      title: Text("Simple Alert"),
      content: Text("This is an alert message."),
    );
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return alert;
      },
    );
  }
  
  Widget build(BuildContext context) {
 return Scaffold(
   TextField(
                onChanged: (String value) {
                if (value.length == 10){
                  setState(()=> isEnabled = true);
                } else {
                  isEnabled = false;
                }
                  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: () {
                        isEnabled == true ? callbackfunction : null;
                     },
                     child: const Icon(Icons.arrow_forward_rounded, size: 25),
                      style: ElevatedButton.styleFrom(
                       shape: CircleBorder(),
                       padding: EdgeInsets.all(15)
                   )
                 ),
               ],
             )
)
  }

CodePudding user response：

You have to change the way you define the onPressed attribute

Try

onPressed: isEnabled ? callbackfunction : null,

In the previous way, you define always a function and the check on it will result always to not be null

CodePudding user response：

You can do using flutter services just change it to:

inputFormatters: [
  new LengthLimitingTextInputFormatter(10),
],