Hero animations in Flutter are dead simple

Posted on Leave a comment

When I was learning React Native, I was sort of super-impressed by its emphasis on animations. We all know how critical animations are in creating experiences that users actually like. RN has a profound Animated API and loads of examples on creating custom animations. There’s only one problem: adding beyond-simple animations is tricky and a lot of work.

I remember coming across this neat and detailed Medium article by Jiří Otáhal on creating Hero animations, becoming immediately excited, writing it down in my ‘urgent’ TODO list, and then never ever actually following it up. It was considerable amount of work, and I just couldn’t put myself together for the task.

Today when I was learning about animations in Flutter (AppBrewery course), I was friggingly relieved to know how easy it is to achieve the same here. See the screenshot below. Get what I mean?

Hero animations in Flutter.
These are transition animations on a shared object (widget) when navigating from one screen to another.

Of course, the RN animation tutorial that I linked earlier tries to achieve a more profound goal. But, clearly, in Flutter we have a better starting point.

Happy coding. Talk to you in the next one 🤘.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.