Need two adjacent widgets to smoothly blend into each other only in the overlap area? Mask each w...Need two adjacent widgets to smoothly blend into each other only in the overlap area? Mask each w...
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Oleh's avatar
Oleh Karnaukhov
• Oct 24
Need two adjacent widgets to smoothly blend into each other only in the overlap area? Mask each widget with a horizontal alpha gradient: the left one fades out on the right, the right one fades in on the left. Place them in a Stack with the desired overlap.
Flutter widgets used: - ShaderMask + LinearGradient + BlendMode.dstIn - Stack / Positioned
Performance: the mask is executed on the GPU (fast per-pixel work), does not trigger expensive layout rebuilds when animated, and localizes repaints - resulting in a smooth, efficient cross-fade on most devices.
lineargradientshadermask
Post image
Back to feed
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started