flutter_animate

flutter_animate copied to clipboard

Right now TintEffect has a color param, and uses a double for its value to indicate the strength of the tint.

It might make sense to update it to remove the color param completely, and change its value to be of type Color. This would be a tiny bit more work for a monochromatic tint since the strength would be determined by the color's alpha, but would enable the ability to animate between different colors of tint.

It's worth noting though that you get a somewhat similar effect now by nesting tints (though this is not identical, and is more expensive).

// current (verbose):
foo.animate().tint(color: Colors.red, begin: 0, end: 1);
foo.animate().tint(color: Colors.blue, begin: 1, end: 0).tint(color: Colors.red, begin: 0, end: 1);

// proposed equivalent (verbose):
foo.animate().tint(begin: Colors.transparent, end: Colors.red);
foo.animate().tint(begin: Colors.blue, end: Colors.red);

I need to retest this, but I believe that Colors.transparent is equivalent to Color(0), and that the default interpolation between a color and transparent affects the rgb channels and not just the alpha channel, leading to a darkening of the color. If that's the case, then devs would likely need to be more specific, like: Colors.red.withOpacity(0). Though the effect could automatically handle this case if begin or end is omitted or null.

Pros: can tint between different colors, and the value type is perhaps more appropriate. Cons: likely a bit fussier to implement and use. Considerations: How common is the use case for animating between different colored tints? I'm guessing fairly rare.

fwiw this is what I would expect, going from black w/ transparency of 0, to red, would not be the same as Red(0) -> Red.

I would naturally write it like:

foo.animate().tint(begin: Colors.red.withOpacity(0), end: Colors.red);

I think I'm going to leave the implementation as-is for now, but if devs run into the use case animating between two different tint colors, I'm happy to revisit. Leaving open to encourage input.

Added a ColorEffect which covers this use case. See f4eff3c1798c45c822aebe751b0804ed98ea5fe3