CODEWITHSUNDEEP
flutterdarticonbutton
Gabriel
Gabriel

Reputation: 386

Flutter Messaging App - Disabling Icon Button

I have a messaging application where you can select from a list of users to talk with. There is an icon button on the App Bar where you can confirm the group of users you want to message. Right now, the user can spam the icon button multiple times. I want to disable the icon button after it has been pressed once. I have a bool iconEnabled variable, but I am unsure where to place it in onPressed.

return Scaffold(
      appBar: AppBar(
        title: Text("Users"),
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.check),
            onPressed: widget.isNew
                ? () async {
                    if (newUsers.length == 0) {
                      return;
                    }
                    widget.thread.users.addAll(newUsers);
                    widget.thread.userIds.addAll(widget.thread.users.map((user) => user.id).toList());
                    widget.thread.users = widget.thread.users;
                    // Call New Thread
                    var threadId = await Client.addThread(widget.thread);
                    widget.thread.id = threadId;
                    Navigator.pushReplacement(
                      context,
                      MaterialPageRoute(
                        settings: RouteSettings(name: "MessagePage"),
                        builder: (context) => MessagePage(
                          thread: widget.thread,
                        ),
                      ),
                    );
                  }
                : () {
                    if (newUsers.length == 0) {
                      return;
                    }
                    widget.thread.users.addAll(newUsers);
                    widget.thread.userIds.addAll(widget.thread.users.map((user) => user.id).toList());
                    widget.thread.users = widget.thread.users;
                    // Call users patch
                    Client.addUsers(widget.thread);
                    Navigator.pop(context);
                  },
          ),
        ],
      ),

Upvotes: 0

Views: 2097

Answers (2)

spenster
spenster

Reputation: 538

If you already have the logic done for when to enable/disable the button, then you're 99% of the way there.

If onPressed is passed null, the button will be disabled. So you can just make a little change in the creation of the IconButton:

onPressed: !iconEnabled ? null : (widget.isNew // ... and put the closing parentheses after the onPressed callbacks

Upvotes: 1

Willie Nandi
Willie Nandi

Reputation: 637

Wrap the IconButton with the AbsorbPointer widget like this:

AbsorbPointer(
          absorbing: buttonDisabled,
          child: IconButton(
          icon: Icon(Icons.check),
          onPressed: () { disableButton();}
        ),
      ),

For this example I declared a global variable: 

 bool buttonDisabled = false;

When the button is pressed: 

 void disableButton() {
    setState(() {
     buttonDisabled = true; 
    });
  }

Upvotes: 1

Related Questions