Flutter- how to disable a Button untill the requireed fields are filled

Question

I want to disable a button untill all the required fields are filled. I found similar questions here but all answers are based on making the onPressed property to null. But it does not disable the tap effect.

I want something like this. On disabled mode, clicking on the button won't even cause a Tap effect. Can someone help with a solution?

Answer 1

For a limited number of widgets, you can wrap them in a widget IgnorePointer: when its ignoring property is set to true, the sub-widget (actually, the entire subtree) is not clickable.

IgnorePointer(
    ignoring: true, // or false
    child: CustomButton(
        onPressed: _login,
        child: Text("Login"),
        ),
)

Answer 2

checkout this widget.set absorb to true when the required field is empty or is not validated. https://api.flutter.dev/flutter/widgets/AbsorbPointer-class.html

Answer 3

In the textField add

onChanged : (val){ setastate((){});}

You mustbe already having a TextEditingController for the textfield. For example i shall name it phoneTextController.

Now in the button check the condition

phoneTextController.text.length > 10

For example

Inkwell(
 onTap:(){
   if(phoneTextController.text.length > 10){
     SendOtp()
    }
}
child: Container(
color: phoneTextController.text.length > 10 ? Colors.blue : Color.blue.withOpacity(0.5),
)
)

Answer 4

If you're using one of Flutter's built-in button Widgets, setting the onTap to null should automatically disable the button and its effect. Now all that remains is to conditionally do this during your build. Say, like the other answer, your TextEditingController is named phoneTextController:

ElevatedButton(
  child: Text('Next'),
  onTap: phoneTextController.text.length > 10 ? () => goToNextPage() : null,
),

Which will automatically enable the button and add the callback as soon as the condition is met (in this example, the input length is >10.