Flutter: Enable/Disable a button according if textformfields are empty don't work

Question

I'm a benniger learning recently flutter and I need enable/disable button "Register" if email, passwords and cellphone are not valid, I made the corresponding code for that, but this line cannot be placed anywhere because it gives me an error:

isButtonActive? (){ setState(()=> isButtonActive = false); passwd.clear(); passwd2.clear();}: null,

I need put that line in this ElevatedButton

child: ElevatedButton(
     // color: Colors.amber[100],
 child: Text('Login',
   style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.bold,
        color: Colors.black)),
  onPressed:
      //
      () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => MyHomePage(),
      ),
    );
  },

Or within the function "Future register() async ".

And I can't because I must be delete the Navigator.push for the isButtonActive sentence work and in future register gives me error.

My form:

class _RegisterState extends State<Register> {
  bool showError = false;
  bool isButtonActive = true;
  String message = '';

  @override
  void initState() {
    super.initState();

    correo.addListener(() {
      final isButtonActive = correo.text.isNotEmpty;

      setState(() => this.isButtonActive = isButtonActive);
    });

    celular.addListener(() {
      final isButtonActive = celular.text.isNotEmpty;

      setState(() => this.isButtonActive = isButtonActive);
    });

    passwd2.addListener(() {
      setState(() {
        showError = passwd2.text.isEmpty
            ? false
            : passwd.text.trim() != passwd2.text.trim();
      });
      final isButtonActive = passwd2.text.isNotEmpty;
      setState(() => this.isButtonActive = isButtonActive);
    });
    passwd.addListener(() {
      setState(() {
        showError = passwd.text.isEmpty
            ? false
            : passwd.text.trim() != passwd2.text.trim();
      });
      final isButtonActive = passwd.text.isNotEmpty;
      setState(() => this.isButtonActive = isButtonActive);
    });
  }

  void validateEmail(String enteredEmail) {
    if (EmailValidator.validate(enteredEmail)) {
      setState(() {
        message = '';
      });
    } else {
      setState(() {
        message = ('Please enter a valid email address!');
      });
    }
  }

  TextEditingController correo = TextEditingController();
  TextEditingController celular = TextEditingController();
  TextEditingController passwd = TextEditingController();
  TextEditingController passwd2 = TextEditingController();

  @override
  void dispose() {
    correo.dispose();
    super.dispose();
  }

  Future register() async {
    var url =
        "http://192.168.2.131/DatabaseDB/register.php"; 
    var response = await http.post(url, body: {
      "correo": correo.text,
      "celular": celular.text,
      "passwd": passwd.text,
      "passwd2": passwd2.text
    });
    var data = json.decode(response.body);
    if (data == "Error") {
      FlutterToast(context).showToast(
          child: Text(
        'User allready exit!',
        style: TextStyle(fontSize: 25, color: Colors.red),
      ));
    } else {
      FlutterToast(context).showToast(
          child: Text('Registration Successful',
              style: TextStyle(fontSize: 25, color: Colors.green)));
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => DashBoard(),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 900,
        child: Card(
          color: Colors.blue[200],
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text(
                  'Register',
                  style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  decoration: InputDecoration(
                      labelText: 'Correo',
                      prefixIcon: Icon(Icons.mail),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide: BorderSide(color: Colors.blue, width: 2.0),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                        borderSide:
                            BorderSide(color: Colors.blue[900], width: 2.0),
                      )),
                  onChanged: (enteredEmail) => validateEmail(enteredEmail),
                  controller: correo,
                ),
              ),
              Text(
                message,
                style: TextStyle(color: Colors.red),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  maxLength: 12,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly,
                  ],
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    labelText: 'Celular',
                    prefixIcon: Icon(Icons.person),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: Colors.blue, width: 2.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide:
                          BorderSide(color: Colors.blue[900], width: 2.0),
                    ),
                  ),
                  controller: celular,
                  textInputAction: TextInputAction.done,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: 'Contraseña',
                    prefixIcon: Icon(Icons.lock),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: Colors.blue, width: 2.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide:
                          BorderSide(color: Colors.blue[900], width: 2.0),
                    ),
                  ),
                  controller: passwd,
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(
                    labelText: 'Repita contraseña',
                    prefixIcon: Icon(Icons.lock),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide: BorderSide(color: Colors.blue, width: 2.0),
                    ),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(8),
                      borderSide:
                          BorderSide(color: Colors.blue[900], width: 2.0),
                    ),
                  ),
                  controller: passwd2,
                ),
              ),
              if (showError)
                const Text(
                  "Las contraseñas no coinciden",
                  style: TextStyle(color: Colors.red),
                ),
              Row(
                children: <Widget>[
                  Expanded(
                    child: ElevatedButton(
                      // color: Colors.pink,
                      style: ElevatedButton.styleFrom(
                        onSurface: Colors.red,
                      ),
                      child: Text('Register',
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: Colors.white)),
                      onPressed: () {
                        register();
                        passwd.text = "";
                        setState(() {});
                      },
                    ),
                  ),
                  Expanded(
                    child: ElevatedButton(
                      // color: Colors.amber[100],
                      child: Text('Login',
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.bold,
                              color: Colors.black)),
                      onPressed:
                          //
                          () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => MyHomePage(),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Within the void initState i have all controllers with their .addListener(() { with final isButtonActive = correo.text.isNotEmpty; setState(() => this.isButtonActive = isButtonActive);

Please help me, I don't understand where to put my isButtonActive sentence if the onPressed of button is occupied.

Thanks

Answer 1

isButtonActive ? (){ setState(()=> isButtonActive = false); passwd.clear(); passwd2.clear();} : null,

Im not sure why you're doing it this way, but it seems to me like it could be the source of the error.

Why don't you just do a simple if:

if (isButtonActive) {
  setState(()=> isButtonActive = false); 
  passwd.clear(); 
  passwd2.clear();
}

And if you need to pass this as a callback to onPressed (or else):

() {
    if (isButtonActive) {
      // … as above
    }
}

Answer 2

@jeremynac look this:

  Expanded(
    child: ElevatedButton(
      // color: Colors.pink,
      style: ElevatedButton.styleFrom(
        onSurface: Colors.blue,
      ),
      child: Text('Register',
          style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: Colors.white)),
      onPressed: () => [
        if (isButtonActive)
          {
            setState(() => isButtonActive = false),
          }
        else
          {null},
        register(),
        // passwd.text = "",
        setState(() {})
      ],
    ),
  ),

This solution to part of problem, with your traditional if sentence and the ()=>[] within onpressed, but don't disable my button if textformfields passwd, passwd2, correo or celular are (at least one) empty.