Hero Transitions is a common UI pattern.

They let that user know they’ve changed the screen, while keeping the focus of the interaction front and center.

Flutter has a Hero Widget that automatically creates a Hero transition between two navigator paths.

Flutter knows the position of the Widget in both routes and animates changes between the positions.

Let’s say you want to use a picture as your Hero.

Place it on two page routes, the route you’re leaving and the route you’re reaching

class MyHomePage extends StatelessWidget { @override Widget build(context) { ... Image.asset('images/dash.jpg), ... } } class MyDetailPage extends StatelessWidget { @override Widget build(context) { ... Image.asset('image/dash.jpg'), ... }}Copy the code

Then, wrap the image with the Hero Widget on both pages and add a tag, which can be any object.

class MyHomePage extends StatelessWidget { @override Widget build(context) { ... Hero ( tag: 'dash', child: Image.asset('images/dash.jpg), ), ... } } class MyDetailPage extends StatelessWidget { @override Widget build(context) { ... Hero ( tag: 'dash', child: Image.asset('image/dash.jpg'), ) ... }}Copy the code

It is important to use the same tags on both pages so that Flutter knows which Hero we are making.

And you’re done.

For best results, make the Widget Tree below the Hero Widget the same on both screens.

Of course, Hero doesn’t just wrap images. You can try using Clips to create some really cool animations.

To learn more about Hero and other features of Flutter, visit Flutter. IO

Video: Video address