Flutter Radial Hero Animations

A radial transformation animates from a circular shape into a square shape.

A radial hero animation performs a radial transformation during flying the hero from the source to the destination route.

MaterialRectCenter­Arc­Tween defines the tween animation.

Create the destination route using PageRouteBuilder.

 

Flying a hero between one route to another as it transforms  a circular shape to a rectangular shape is a slick effect that we can implement using Hero widgets. The code animates the intersection of two clip shapes: a circle and a square. During the animation, the circle clip (and the image)  changes scales from minRadius to maxRadius, but the square clip remains fixed size. At that time, the image flies from its position in the source route to the destination route.

 

The radial hero animation consists of the intersection between a circular shape and a square shape. But it is hard to see, even when slowing the animation with timeDilation, so you might enabling the debugPaintSizeEnabled flag during development.

Leave a Reply

Categories