In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamental types of animation used in the application, especially if the app deals with media like images. Simply put, a hero animation is when a hero flies from one screen to another.
The PhotoHero class is an essential element in Hero Animation to move photos from one route (ie, page) to another.
This article explores the process of building PhotoHero animations using a simple app. To build a Hero animation, the following steps need to be followed:
- Use MaterialPageRoute to move the image from one route to another
- Use the Material Design Motion to specify the motion of the image during the transition
- Through all the above into a simple Flutter app structure.
A standard Photo hero class controls the following properties of the image:
- Size of the hero
- The behavior of the hero when tapped.
The below diagram depicts the same:
Below is a simple example of the PhotoHero animation:
Let’s analyze the above example:
- On tapping the hero image inside the Inkwell widget the MaterialPageRoute creates a destination route. As the destination route is pushed using the Navigator, it triggers the animation.
- The container with the image is then pushed to the top left of the app just below the appbar.
- The tapping the same Hero again the materialPageRoute pushes back to its original position using the same route and opposite animation motion.
- The time delay is used to slow the animation for better viewing.
- Container class in Flutter
- Icon Class in Flutter
- Expanded Class in Flutter
- MaterialApp class in Flutter
- ListView Class in Flutter
- Scaffold class in Flutter with Examples
- Getting Started with Cross-Platform Mobile Application using Flutter
- Difference between React Native and Flutter
- Difference Between Rows and Columns vs Container in Flutter
- Multi Page Applications in Flutter
- Routes and Navigator in Flutter
- Difference Between Stateless and Stateful Widget in Flutter
- Rive animations in Flutter
- ProgressIndicator in Flutter
- Flutter - Stateful vs Stateless Widgets
- Listview.builder in Flutter
- Splash Screen in Flutter
- How to Add images in Flutter App?
- Raised Button widget in Flutter
- Fluttertoast in Flutter
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.