DEV Community

Discussion on: Background fill animation on complex shapes

Collapse
 
fcfn profile image
Peter Timoshevsky • Edited

I did some research on how would one implement a button like that in Flutter (i.e., with background color filling from side to side indicating there is time to cancel the action) and I couldn't find a concrete answer on how to do something like that. I found this example that animates padding to gradually fill a container, but this seems like a very hacky solution for something that seems like a staple UI element (a "hold button"?). A similar technique, only using two containers, is described here. I wonder if I should look into combining a button with the progress bar widget, would it be less hacky?

Anyway, here's an alternative web solution for the problem using two divs and a padding transition inspired by the abovementioned example. It's probably less performant, isn't it? But the code looks a bit more clean.