Creating a demo for setting submit button disabled until all are required TextField is not empty...

username and password TextField are empty.. then submit button should be disabled...

I have done with my basic way, but looking for advanced code so that it can be not repeated typing like I have more text fields

here is my basic code...

class _Stack4State extends State<Stack4> {
  TextEditingController txtusername = TextEditingController();
  TextEditingController txtpassword = TextEditingController();

  bool isenable = false;

  void checkfieldvalue(String username, String password) {
    if (username.length > 3 && password.length > 6) {
      setState(() {
        isenable = true;
      });
    } else {
      setState(() {
        isenable = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[300],
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
            const SizedBox(
              height: 20,
            ),
            TextField(
              controller: txtusername,
              onChanged: (value) {
                checkfieldvalue(txtusername.text, txtpassword.text);
              },
            ),
            SizedBox(
              height: 20,
            ),
            TextField(
                controller: txtpassword,
                onChanged: (value) {
                  checkfieldvalue(txtusername.text, txtpassword.text);
                }),
            const SizedBox(
              height: 20,
            ),
            ElevatedButton(
              child: isenable ? Text('Register') : Text('Fill Data First'),
              onPressed: () {
                if (isenable == true) {
                  //code for submit
                }
              },
            ),
          ]),
        ),
      ),
    );
  }
}

CodePudding user response：

You can addListener

 @override
  void initState() {
    super.initState();
    txtusername.addListener(() {
      checkfieldvalue(txtusername.text, txtpassword.text);
      setState(() {});
    });
    txtpassword.addListener(() {
      checkfieldvalue(txtusername.text, txtpassword.text);
      setState(() {});
    });
  }

And button

ElevatedButton(
  child: isenable ? Text('Register') : Text('Fill Data First'),
  onPressed: isenable
      ? () {
          if (isenable == true) {
            //code for submit
          }
        }
      : null,
),

CodePudding user response：

First define this variable:

final _formKey = GlobalKey<FormState>();

then use Form widget inside your widget tree like this:

SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Form(
                        key: _formKey,
                        child: Column(
                          children: [
                            const SizedBox(
                              height: 20,
                            ),
                            TextField(
                              controller: txtusername,
                              onChanged: (value) {
                                checkfieldvalue(
                                    txtusername.text, txtpassword.text);
                              },
                              validator: (value) {
                                 if (value == null || value.isEmpty) {
                                     return 'username is empty';
                                 }else if (value.characters.length < 4){
                                      return 'username is in wrong format';
                                   }
                                 return null;
                               },
                            ),
                            SizedBox(
                              height: 20,
                            ),
                            TextField(
                                controller: txtpassword,
                                onChanged: (value) {
                                  checkfieldvalue(
                                      txtusername.text, txtpassword.text);
                                },
                                validator: (value) {
                                   if (value == null || value.isEmpty) {
                                      return 'password is empty';
                                   }else if (value.characters.length < 4){
                                      return 'password is in wrong format';
                                   }
                                   return null;
                                },
                            ),
                            const SizedBox(
                              height: 20,
                            ),
                          ],
                        )),
                    ElevatedButton(
                      child:
                          Text('Register'),
                      onPressed: _formKey.currentState != null &&
                              _formKey.currentState.validate()
                          ? () {}
                          : null,
                    ),
                  ]),
            ),
          ),

and use its key to handle validation state. You can set your checkfieldvalue in validator.