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?

Use IgnorePointer to make your button not work. Also can put that in Opacity widget so user can see it is not active. Have a bool variable that stores the value if your button should be clickable or not. Create a function that checks the values and sets the value of this variable. — stacktrace2234, Jun 25 '22 at 08:47

score 1 · Accepted Answer · answered Jun 25 '22 at 06:29

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

score 0 · Answer 2 · answered Jun 25 '22 at 04:28

0

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

answered Jun 25 '22 at 04:28

Jay

206
1
5

score 0 · Answer 3 · answered Jun 25 '22 at 04:28

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

score 0 · Answer 4 · answered Jun 25 '22 at 09:18

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.

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

4 Answers4