Your Second Flutter App

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 Personal Plan.

Unlock now

When navigating between screens in an app, it's helpful to use some visual cue to assist the user in knowing the context of where they come from and where they're going to. A hero animation is a common technique for implementing such a visual cue. You can use a hero animation when the screen you're navigating to has a large image that you can identify as the hero image, and when the screen you're navigating from has another version of that image, often as a thumbnail in a list of items. That would be the case when you're going from a list screen to a details screen as you're doing in the RWCourses app. Setting up a basic hero image in Flutter is a very straightforward process. You just wrap the image on both source and destination screens in a Hero widget, and then give both the Hero widgets the same tag. Flutter will do the rest for you, animating the image as the user navigates between the screens both forward and back. In this episode, you'll create a basic hero animation. To dive deeper into more hero animation techniques, check out our course, Flutter Hero Animations. To get started, open your project in progress or download the starter project for this episode. We're going to add a hero animation to the course thumbnail. Open up courses_page.dart. You can find it in the Courses sub folder inside of the UI folder. Select the ClipRRect widget and right click on it. Select Refactor and choose a widget. Change it to a Hero widget. We're getting an error because we haven't added a tag to it. Add a tag to the Hero that uses the Course ID to create a unique value. Then set the Transition on User Gestures value on the Hero to True. This makes the animation occur if the transition between screens occurs due to a user gesture, such as a back swipe on iOS instead of a call to the navigator. Now, open up course_details_page.dart. In the Build Banner method, wrap the Image Container with a similar Hero widget. You use the same tag from the Course ID for the Hero widget on the Course Details screen. Build and run, or hot reload. Tap on a course listing, and look at that. We get a nice hero transition.