CODEWITHSUNDEEP
fluttermaterialbutton
Gireesh
Gireesh

Reputation: 181

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

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?

Upvotes: 2

Views: 525

Answers (4)

fravolt
fravolt

Reputation: 3001

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.

Upvotes: 0

Mayur Agarwal
Mayur Agarwal

Reputation: 1834

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

Upvotes: 1

Kaushik Chandru
Kaushik Chandru

Reputation: 17822

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

Upvotes: 0

Jay
Jay

Reputation: 261

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

Upvotes: 0

Related Questions