CODEWITHSUNDEEP
flutterandroid-studiodartflutter-layoutdart-ui
taha khamis
taha khamis

Reputation: 567

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

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.

Upvotes: 0

Views: 298

Answers (3)

anddevmanu
anddevmanu

Reputation: 1459

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

Upvotes: 0

stacktrace2234
stacktrace2234

Reputation: 1500

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;});
   }
}

Upvotes: 3

Gicu Aftene
Gicu Aftene

Reputation: 532

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

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

Upvotes: 0

Related Questions