Flutter Messaging App - Disabling Icon Button

Question

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);
                  },
          ),
        ],
      ),

score 1 · Answer 1 · answered Aug 02 '19 at 18:24

1

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; 
    });
  }

answered Aug 02 '19 at 18:24

Willie Nandi

621
6
9

When I pass the disabledButton function, I get the error "conditions must have the static type of bool" – Gabriel Aug 02 '19 at 19:37
disableButton() is a function in the State of the same page. You don't need to pass it. – Willie Nandi Aug 02 '19 at 19:47

score 1 · Accepted Answer · answered Aug 02 '19 at 18:36

1

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

answered Aug 02 '19 at 18:36

spenster

548
3
9

Where should I set the state? – Gabriel Aug 02 '19 at 19:13
If you want to disable the button right after it's pressed, then you can put `setState(() { iconEnabled = false });` right after the `if (newUsers.length == 0) { return; }` block in both functions. – spenster Aug 02 '19 at 20:20

Flutter Messaging App - Disabling Icon Button

2 Answers2