Your Second Flutter App

Nov 30 2021 Dart 2.13, Flutter 2.2.3, Visual Studio Code

Part 3: Navigate & Animate

21. Use a Hero Animation

Lesson Complete

Play Next Lesson
Next
Save for later
About this episode
See versions
See forum comments
Cinema mode Mark as Complete Download course materials
Previous episode: 20. Challenge: Add a Filter Screen Next episode: 22. Utilize Dart Dev Tools

This video was last updated on Nov 30 2021

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.

When navigating between screens in a app, it’s helpful to use some visual cues to assist a user in knowing the context of where they came from and where they’re going to. A hero animation is a common technique for implementing such a visual cue.

trailing: Hero(
  child: ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
      course.artworkUrl,
    ),
tag: 'cardArtwork-${course.courseId}',
transitionOnUserGestures: true,
    return Hero(
      tag: 'cardArtwork-${course.courseId}',
      transitionOnUserGestures: true,
      child: ImageContainer(
        height: 200,
        url: course.artworkUrl,
      ),