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.
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.
All videos. All books.
One low price.
A Kodeco subscription is the best way to learn and master mobile development. Learn iOS, Swift, Android, Kotlin, Flutter and Dart development and unlock our massive catalog of 50+ books and 4,000+ videos.