CODEWITHSUNDEEP
flutterflutter-layout
Febin Johnson
Febin Johnson

Reputation: 382

Disable Button While processing Flutter

How can I disable a a button while in processing? I have made a like button, but it takes some delay to register the like on db. How can I prevent the button press while processing is done. ??

onPressed: () {
                  setState(() {
                    _color = Colors.green;
                    _icon = Icon(Icons.favorite);
                    final like = LikeData(
                      campaingID: donation.campaignID,
                      dateTime: Timestamp.now(),
                      userName: FirebaseAuth.instance.currentUser.displayName,
                      userId: user.uid,
                    );
                    likeService.newLike(donation, like);

how can i prevent double tap on this button event??

Upvotes: 0

Views: 853

Answers (4)

Hassan Sharara
Hassan Sharara

Reputation: 5

firstly you need to create bool variable like this '

bool _isworking=false;

onPressed:(){

if(_isworking==false){

 setState(() {
_isworking=true;
});

{{ here your function }}

setState(() {

_isworking=false;

});

} else {

print('the Function is working now please wait ');

//you can edit this and show the user a dialog that the process is going on and he need to wait

}

}

Upvotes: 0

KuKu
KuKu

Reputation: 7502

You can do adding a variable between processing.

I think that 'newLike' is synchronous method.
So you set checking variable true and processing 'newLike'.
After that set checking variable false to enable button.

bool isProcessing = false;

...

onPressed: isProcessing ? null : () async {
                  setState(() {
                     isProcessing = true;

                    final like = LikeData(
                      campaingID: donation.campaignID,
                      dateTime: Timestamp.now(),
                      userName: FirebaseAuth.instance.currentUser.displayName,
                      userId: user.uid,
                    );
                    await likeService.newLike(donation, like);
                  });

                  setState(() {
                    _color = Colors.green;
                    _icon = Icon(Icons.favorite);
                      isProcessing = false;
                  });

Upvotes: 0

rgisi
rgisi

Reputation: 952

Think of it as three different states, e.g. "initial", "pressedConfirmationPending" and "pressedAndConfirmed". The button can then be enabled depending on this status, e.g.:

String buttonStatus = 'initial';
...
MyButton(
  ...
  enabled: buttonStatus == 'initial' || buttonStatus == 'pressedAndConfirmed',
  ...
);

Set the status to 'pressedConfirmationPending' just before you start the input processing, and then to 'pressedAndConfirmed' after your receive confirmation that processing is finished.

Also, the button's design and child widget will most likely be different, and possibly also it's onPressed functionality.

Upvotes: 0

Moaid ALRazhy
Moaid ALRazhy

Reputation: 1744

try this

bool isProcessing = false; // in your class before build method

onPressed: !isProcessing ? () {
          setState(() {
            isProcessing = true;
            _color = Colors.green;
            _icon = Icon(Icons.favorite);
            final like = LikeData(
              campaingID: donation.campaignID,
              dateTime: Timestamp.now(),
              userName: FirebaseAuth.instance.currentUser.displayName,
              userId: user.uid,
            );
            likeService.newLike(donation, like).then((val) {
              setState() {
                isProcessing = false;
              }
            });
          });
        } : null,

Upvotes: 2

Related Questions