IconButton calling setState during onPressed shows no ripple effect

1.6k Views Asked by At

During the onPressed of my IconButton I need to update the database and then the UI so that the user sees feedback of the data change. To do this I call setState, which successfully lets the Widget rebuild. The problem is I'm no longer seeing the touch feedback ripple effect because the Widget rebuilds immediately.

var button = new IconButton(
    icon: new Icon(isMyBoolTrue ? Icons.undo : Icons.event_available),
    onPressed: () => setState(() => toggleDatabaseBool)
);
2

There are 2 best solutions below

2
On

That shouldn't stop the splash. The only reason the splash should stop is if you add or remove one of the widgets between the IconButton and the Material, or change its key, or change the Material's key, or move the Material in the tree. (Some of those are bugs in the framework right now, I hope to fix them in the coming months.)

Can you post a minimal app that shows the problem?

Meanwhile, we're tracking the issue at https://github.com/flutter/flutter/issues/6751 and https://github.com/flutter/flutter/issues/5456

0
On

The issue was I was creating an ObjectKey with an object that was re-created every time during build. Solved the issue by using ObjectKey and the id field of my object instead of the object itself.

Bad

var card = new Card(
    key: new ObjectKey(goal), //the goal object was re-created during `build`
    child: button
);

Good

var card = new Card(
    key: new ObjectKey(goal.id), // need to key off of the id field as it remains constant
    child: button
);