Flutter Hero Animations

Learn and understand how to use the Hero widget in Flutter to animate beautiful screen transitions for your apps. By Emmanuel Okiche 🇳🇬.

Leave a rating/review
Save for later
Comments
Share

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
01
Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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