{"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":true,"created_at":"2019-12-17T20:52:29.943Z","updated_at":"2020-01-18T11:01:19.823Z","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":235.428571428571,"labelled_as_new":true,"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":"1.0","rating_count":1,"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-01-18T11:00:54.507Z","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":1036.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"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},{"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-01-18T07:00:35.670Z","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":297.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"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},{"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-01-18T09:00:43.057Z","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":75.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"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},{"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-01-18T09:00:43.173Z","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":75.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"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},{"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-01-18T09:00:43.237Z","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":46.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"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},{"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-01-17T16:00:53.587Z","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":52.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"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},{"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-01-17T16:00:53.811Z","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":67.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":true,"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}]}]}

Create your free learning account today!