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

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 20. Challenge: Add a Filter Screen Next episode: 22. Utilize Dart Dev Tools

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

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

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,
      ),