how to make a button disable in flutter

Question

I'am trying to create a profile form . I want to disable or enable the button based on the validation. I tried to check the currentstate of form validated or not. it is working fine but when i type on one of the textFormField , I am getting error message on all of the textFormField . Here is the code i'am working.

import 'dart:html';

import 'package:flutter/material.dart';




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

  @override
  State<ProfileForm> createState() => _ProfileFormState();
}

class _ProfileFormState extends State<ProfileForm> {
  final _formKey = GlobalKey<FormState>();

  DateTime selectedDate = DateTime.now();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();
  final _dobController = TextEditingController();
  final _currentLocationController = TextEditingController();
  final _locationIndiaController = TextEditingController();
  bool btndisable = false;

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

  @override
  Widget build(BuildContext context) {
    RegExp emailValidator = RegExp(
        r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$');

    return Scaffold(

      body: SingleChildScrollView(
          child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(

          key: _formKey,
          onChanged: () {
            notdisbled();
           
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "Let’s create a profile for you",
                style: AppTextStyleSecondary.headline2sec,
              ),
              const SizedBox(
                height: 12,
              ),
              Padding(
                padding: const EdgeInsets.only(right: 100.0),
                child: Text(
                  "Please enter your personal details",
                  
                ),
              ),
              const SizedBox(
                height: 16,
              ),
              Text("Your name"),
              TextFormField(
                autovalidateMode: AutovalidateMode.onUserInteraction,
                onChanged: (val) {
                 
                },
                validator: (val) {
                  if (val.toString().length < 2) {
                    return "Please enter your name";
                  }
                  return null;
                },
                controller: _nameController,
                decoration: const InputDecoration(
                    isDense: true,
                    contentPadding:
                        EdgeInsets.symmetric(horizontal: 10, vertical: 12)),
              ),

              Text(labelText: "Date of Birth"),
              InkWell(
                child: TextFormField(

                  onTap: () {
                    _selectDate(context);
                  },
                  validator: (val) {
                    if (val.toString().isEmpty) {
                      return "This field is required";
                    } else {
                      return null;
                    }
                  },
                  readOnly: true,
                  controller: _dobController,
          
                ),
              ),
          
              Text("Email address"),
              TextFormField(
    
                controller: _emailController,
                onChanged: (val) {},
                autovalidateMode: AutovalidateMode.onUserInteraction,
                validator: (val) {
                  String email = val!.trim();
                  if (emailValidator.hasMatch(email)) {
                    return null;
                  } else {
                    return "Enter valid email address";
                  }
                },
                decoration: const InputDecoration(
                    isDense: true,
                    contentPadding:
                        EdgeInsets.symmetric(horizontal: 10, vertical: 12)),
              ),

              Text(labelText: "Your location where you currently live"),
              TextFormField(
               autovalidateMode: AutovalidateMode.onUserInteraction,
                validator: (val) {
                  if (val.toString().isEmpty) {
                    return "This field is required";
                  } else {
                    return null;
                  }
                },
                onChanged: (val) {
         
                },

                controller: _currentLocationController,
            
              ),
              Text("Your location in India"),
              TextFormField(
                autovalidateMode: AutovalidateMode.onUserInteraction,
                validator: (val) {
                  if (val.toString().isEmpty) {
                    return "This field is required";
                  } else {
   

                    return null;
                  }
                },
                onChanged: (val) {},

                controller: _locationIndiaController,
                
              ),
              const SizedBox(
                height: 25,
              ),
              Container(
                width: double.infinity,
                height: 45,
                decoration: BoxDecoration(
                  color: btndisable ? Colors.blue : Colors.red,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: TextButton(
                  onPressed: (){
                    if(_formKey.currentState!.validate()){
                      Navigator.of(context).pushNamedAndRemoveUntil(
                              'HomeScreen', (Route<dynamic> route) => false);
                    }
                  }
                  child: Text("Continue"),
                ),
              ),
              const SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      )),
    );
  }

  Future<void> _selectDate(BuildContext context) async {
    final DateTime? picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(1970),
        lastDate: DateTime(2101));
    if (picked != null && picked != selectedDate) {
      setState(() {
        selectedDate = picked;
        _dobController.text =
            "${selectedDate.day}/${selectedDate.month}/${selectedDate.year}";
      });
    }
  }

  void notdisbled() {
    if (_formKey.currentState!.validate() == false) {
      setState(() {
        btndisable = false;
      });
    } else {
      setState(() {
        btndisable = true;
      });
    }
  }
}

Answer 1

for disable the button change to this :

child: TextButton(
                  onPressed: _formKey.currentState != null && _formKey.currentState.validate() ? () {
                    Navigator.of(context).pushNamedAndRemoveUntil(
                          'HomeScreen', (Route<dynamic> route) => false);
                  }: null,
                  child: AppText(
                      text: "Continue",
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: AppColor.white),
                ),

but when you use

formKey.currentState!.validate()

when you type any thing, flutter try call it every time so your form widget run all validator func in all its textfield. so it is natural for all textfield to get error message