How to do Hero Animation in Flutter?
Image showing the implementation of hero animation
The animation is a vital part of the modern app and web UX. This tutorial shows a simple implementation of hero animation. Here we create 2 widgets page1 and page2. Then we navigate from page1 to page2 and backward to show how hero animation is done.
Alright Let's start coding
Hero animation can be done with any widget containing an image. We just need to wrap the widget containing an image with a hero animation. Here we wrap the circular avatar widget with Hero widget. The main thing to note is the value of the "tag" attribute. In our case, we have given the value of tag as "profile-image". This should the same for the hero widget used on page 2 as well.
We have also wrapped the entire widget inside a GestureDetector which will capture the tap event and navigate page2 as shown in the code.
On page 2 we wrap the container with a hero widget having a tag with value "profile-image" which is the same as page 1.
How to Make Glowing Play Button Animation in Flutter?
This widget can be used in a UI as play button for a music player, start button for games or even as loading indicator.
How to Create Instagram like Story Circle Animation in Flutter?
Simple step by step guide on how to create Instagram story circle animation with Flutter.
Polygon clipper in Flutter
A guide on how to clip images in various polygon shapes using polygon_clipper in Flutter