Flutter Hero Animations [FREE]

Learn about Hero Animations in Flutter and see how to add it to existing widgets during a page transition.

Create a custom transition for the navigation to bypass the native page transtion, which will help create the desired hero animation effect.

Understand the stages of a Hero Animation and use that knowledge to control the widget during a page transition.

Use the knowledge from the previous episode to make the background widget transition properly during the flight of the Hero.

Create a Slide animation for the BottomNavigationBar widget which kicks off as soon as the Detail page is loaded.

Use the same approach from the previous video to finish off the animation of the transition by sliding in the main content area.

Learn how to control the animation sequence when the native back button is pressed.

Who is this for?

iOS, Android and Flutter Developers who want to understand and effectively utilize the Hero widget to create screen transitions for their apps. This course expects you to understand the basics of animation in Flutter and have a solid understanding of working with widgets in Flutter.

Covered concepts

• Hero widget
• Building custom route transitions using PageRouteBuilder
• Using AnimationController to manage animations
• Creating Tween Animations
• Control animation sequence using the Interval curve
• Using the WillPopScope widget
• Leveraging Dart DevTools to monitor animation