{"id":7137759,"uri":"rw://betamax/collections/222","name":"Flutter Hero Animations","description":"

Learn and understand how to use the Hero widget in Flutter to animate beautiful screen transitions for your apps.

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":false,"created_at":"2019-12-17T20:52:29.943Z","updated_at":"2020-04-07T02:30:23.203Z","duration":1631,"difficulty":"intermediate","content_type":"collection","platform_id":50,"language_id":26,"editor_id":51,"group_id":null,"ordinal":null,"body":null,"warnings":[],"related_content_id":null,"popularity":505.285714285714,"labelled_as_new":false,"display_attributes":{"concepts_covered":"

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

","intended_audience":"

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.

"},"average_rating":"3.0","rating_count":4,"professional":true,"to_param":"7137759-flutter-hero-animations","released_versions_data":[{"id":7137759,"url":"7137759-flutter-hero-animations","description":"Dart 2.5, Flutter 1.9, VS Code 1.40"}],"groups":[{"id":498,"uri":"rw://betamax/collections/222","content_id":7137759,"ordinal":0,"name":"","description":"","created_at":"2019-12-23T17:36:02.394Z","updated_at":"2019-12-23T17:36:02.407Z","contents":[{"id":7233095,"uri":"rw://betamax/videos/3448","name":"Create a Basic Hero Animation","description":"

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

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":true,"created_at":"2019-12-23T17:36:48.342Z","updated_at":"2020-04-06T21:30:29.070Z","duration":293,"difficulty":"intermediate","content_type":"episode","platform_id":50,"language_id":26,"editor_id":51,"group_id":498,"ordinal":1,"warnings":[],"related_content_id":null,"popularity":2155.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter Hero Animations · Create a Basic Hero Animation","duration_in_time":"4:53","identifier":"3448","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3448/64119e75-229a-46e3-8dde-f56a0d386765.png","released":true,"has_materials_url":true,"permission_tags":[]},{"id":7233129,"uri":"rw://betamax/videos/3449","name":"Build a Custom Route Transition","description":"

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

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":false,"created_at":"2019-12-23T17:37:39.574Z","updated_at":"2020-04-05T20:30:30.160Z","duration":284,"difficulty":"intermediate","content_type":"episode","platform_id":50,"language_id":26,"editor_id":51,"group_id":498,"ordinal":2,"warnings":[],"related_content_id":null,"popularity":622.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"episode_title_with_course":"Flutter Hero Animations · Build a Custom Route Transition","duration_in_time":"4:44","identifier":"3449","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3449/962ff3f9-853d-4cdd-abb6-f012ea53a6bb.png","released":true,"has_materials_url":true,"permission_tags":["stream-professional-videos"]},{"id":7233145,"uri":"rw://betamax/videos/3450","name":"Control the Hero's Flight","description":"

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

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":false,"created_at":"2019-12-23T17:38:00.269Z","updated_at":"2020-04-06T09:30:27.416Z","duration":210,"difficulty":"intermediate","content_type":"episode","platform_id":50,"language_id":26,"editor_id":51,"group_id":498,"ordinal":3,"warnings":[],"related_content_id":null,"popularity":180.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"episode_title_with_course":"Flutter Hero Animations · Control the Hero's Flight","duration_in_time":"3:30","identifier":"3450","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3450/49517e47-cfe6-490e-b420-d49674d7fdd3.png","released":true,"has_materials_url":true,"permission_tags":["stream-professional-videos"]},{"id":7233165,"uri":"rw://betamax/videos/3451","name":"Animate the Background Transition","description":"

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

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":false,"created_at":"2019-12-23T17:38:23.540Z","updated_at":"2020-04-06T15:30:29.219Z","duration":238,"difficulty":"intermediate","content_type":"episode","platform_id":50,"language_id":26,"editor_id":51,"group_id":498,"ordinal":4,"warnings":[],"related_content_id":null,"popularity":166.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"episode_title_with_course":"Flutter Hero Animations · Animate the Background Transition","duration_in_time":"3:58","identifier":"3451","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3451/2da36d75-996f-4a1b-9afe-101833245f61.png","released":true,"has_materials_url":true,"permission_tags":["stream-professional-videos"]},{"id":7233189,"uri":"rw://betamax/videos/3452","name":"Animate the BottomNavigationBar","description":"

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

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":false,"created_at":"2019-12-23T17:38:47.162Z","updated_at":"2020-04-06T11:30:41.416Z","duration":261,"difficulty":"intermediate","content_type":"episode","platform_id":50,"language_id":26,"editor_id":51,"group_id":498,"ordinal":5,"warnings":[],"related_content_id":null,"popularity":144.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"episode_title_with_course":"Flutter Hero Animations · Animate the BottomNavigationBar","duration_in_time":"4:21","identifier":"3452","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3452/7a3260b4-21c5-47a2-b71d-5a67826f6910.png","released":true,"has_materials_url":true,"permission_tags":["stream-professional-videos"]},{"id":7233229,"uri":"rw://betamax/videos/3453","name":"Finish off the Animation Sequence","description":"

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

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":false,"created_at":"2019-12-23T17:39:30.397Z","updated_at":"2020-04-06T04:30:23.441Z","duration":142,"difficulty":"intermediate","content_type":"episode","platform_id":50,"language_id":26,"editor_id":51,"group_id":498,"ordinal":6,"warnings":[],"related_content_id":null,"popularity":133.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"episode_title_with_course":"Flutter Hero Animations · Finish off the Animation Sequence","duration_in_time":"2:22","identifier":"3453","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3453/4a31900d-2143-415b-b204-75077be49064.png","released":true,"has_materials_url":true,"permission_tags":["stream-professional-videos"]},{"id":7233260,"uri":"rw://betamax/videos/3454","name":"Handle the Back Button","description":"

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

","released_at":"2020-01-07T14:00:00.000Z","searchable":true,"free":false,"created_at":"2019-12-23T17:39:49.341Z","updated_at":"2020-04-04T03:30:21.784Z","duration":203,"difficulty":"intermediate","content_type":"episode","platform_id":50,"language_id":26,"editor_id":51,"group_id":498,"ordinal":7,"warnings":[],"related_content_id":null,"popularity":137.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"episode_title_with_course":"Flutter Hero Animations · Handle the Back Button","duration_in_time":"3:23","identifier":"3454","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3454/c54547c8-5ad7-46f6-9235-73cb8206548a.png","released":true,"has_materials_url":true,"permission_tags":["stream-professional-videos"]}]}]}

Go from beginner to master with raywenderlich.com Professional!