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

Time:06-25

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.

enter image description here

enter image description here

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?

CodePudding user response:

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"),
        ),
)

CodePudding user response:

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

CodePudding user response:

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),
)
)

CodePudding user response:

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.

  • Related