How to disable a button in flutter untill all Text feilds are filled

Question

I have a registration form with multiple text feilds and a Radio button and a birthdate picker. I want to disable the submit button untill the user key in all the required feilds. I managed to do something but it only validates one text feild.


 bool activateTheButton =false;

@override
 initState(){
   super.initState();
    nameController = TextEditingController();

    nameController.addListener(() {
      final activateTheButton = nameController.text.isNotEmpty;
      setState(() => this.activateTheButton = activateTheButton);

   ......................
ElevatedButton( onPressed: activateTheButton
             ? (){

         }: null,

 }

How can I make it so that all the textfeilds along with the radio button and date of birth must have data first then activate button?

your help is highly appreciated.

score 3 · Accepted Answer · answered Jul 12 '22 at 10:01

Have a variable that enables/disables the button:

bool _disabled = true;

Use IgnorePointer and Opacity for the button:

IgnorePointer(
  ignoring: _disabled;
  child: Opacity(
    opacity: _disabled ? 0.5 : 1.0,
    child: YourButton(...),
  )
)

You are going to have controllers for each TextFields;

TextEditingController _controllerOne;
TextEditingController _controllerTwo;

Use the TextField's onChanged: (value) {} to call a method that handles the _disabled variable:

TextField(
  controller: _controllerOne,
  onChanged: (text) {
    _setDisabled();
  },
),

_setDisabled() {
   if (_controllerOne.text != "" && _controllerTwo.text != "") {
      setState(() {_disabled = false;});
   } else {
      setState(() {_disabled = true;});
   }
}

Thanks. I just had to change some lines to make it work properly. First the button was activated when the bool was false and ignored when it was true so I had to change this line: " ignoring: !activateTheButton, child: Opacity( opacity: activateTheButton ? 1.0 : 0.5," And then I changed the _setDisabled() function to: "if (Name1!.isNotEmpty && Weight1!.isNotEmpty && Height1!.isNotEmpty) {" where I declared few new strings and assigned the values to them cause some of the values I had in the feilds were numbers. Finally I just had to flip the setState in the function. — taha khamis, Jul 12 '22 at 10:52

score 0 · Answer 2 · answered Jul 12 '22 at 09:49

0

Take a look here How do I disable a Button in Flutter?

In the same way you should enable it when you wanto to.

answered Jul 12 '22 at 09:49

Gicu Aftene

502
2
9

None of these answers is solving my issue here. As I stated, I can disable and enable the button based on one textfeild state but in my case, I have multiple tectfeilds and I want to make sure that all of them has values before enabling the button again. – taha khamis Jul 12 '22 at 09:55
Try using a static variable, or initate a class in a global object or use static members, that saves the validation status of each text field. And every time you change a text field set a proper value in it and check every time if all proprietes ar valid in order to enable the button. – Gicu Aftene Jul 12 '22 at 12:34

score 0 · Answer 3 · answered Jul 12 '22 at 10:02

check this hope this helps

class ResetPasswordForm extends StatefulWidget {
const ResetPasswordForm({Key? key}) : super(key: key);

@override
_ResetPasswordFormState createState() => _ResetPasswordFormState();
}

class _ResetPasswordFormState extends State<ResetPasswordForm> {
 final _formKey = GlobalKey<FormState>();
   final TextEditingController _emailController = TextEditingController();
   final bool _isValidated = false;

String? validateEmail(String? value) {
String pattern = ValidatorRegex.emailAddress;
RegExp regex = RegExp(pattern);
if (value == null || value.isEmpty || !regex.hasMatch(value)) {
  return ValidatorString.enterValidEmail;
} else {
  setState(){
    _isValidated = true;
  }
  return null;
}
  }

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

  @override
  Widget build(BuildContext context) {
return Column(
  children: [
    Form(
      key: _formKey,
      child: TextFormField(
        controller: _emailController,
        validator: (value) => validateEmail(value),
      ),
    ),
    ElevatedButton(
      onPressed:_isValidated
          ? () {
              //do stuff
            }
          : null,,
      child: const Text('Reset Password'),
    ),
  ],
);
 }
 }

How to disable button until text form field has valid data Flutter

Thanks for your response. I have seen this answer earlier but unfortunately, it doesn't give me the behavior I am looking for. — taha khamis, Jul 12 '22 at 10:56

How to disable a button in flutter untill all Text feilds are filled

3 Answers3