{"id":10400890,"uri":"rw://betamax/collections/252","name":"Flutter UI Widgets","description":"

Explore commonly used UI widgets in Flutter and see how they relate to their native iOS and Android conterparts.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-07T08:53:01.653Z","updated_at":"2020-08-14T14:30:41.919Z","duration":5272,"difficulty":"beginner","content_type":"collection","platform_id":56,"language_id":27,"editor_id":59,"group_id":null,"ordinal":null,"body":null,"warnings":[],"related_content_id":null,"popularity":104.642857142857,"labelled_as_new":false,"display_attributes":{"concepts_covered":"

Exploring common UI widgets
Comparing widgets to their native counterparts
UI widgets unique to Flutter

","intended_audience":"

Flutter, iOS and Android developers seeking to learn about the UI widgets provided by the Flutter the framework. It is expected that you have knowledge of setting up a basic Flutter application before taking this course.

"},"average_rating":"5.0","rating_count":1,"professional":false,"obfuscated_body":null,"to_param":"10400890-flutter-ui-widgets","released_versions_data":[{"id":10400890,"url":"10400890-flutter-ui-widgets","description":"Dart 2.7, Flutter 1.12, VS Code 1.43"}],"groups":[{"id":589,"uri":"rw://betamax/collections/252","content_id":10400890,"ordinal":0,"name":"","description":"","created_at":"2020-05-07T08:53:01.861Z","updated_at":"2020-05-07T08:53:01.869Z","contents":[{"id":10400892,"uri":"rw://betamax/videos/3916","name":"Understand Flutter's UI Approach","description":"

Get a brief overview of how flutter approaches UI creation using the declarative approach and how it compares to its native counterparts.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":true,"created_at":"2020-05-07T08:53:22.332Z","updated_at":"2020-08-14T06:30:37.669Z","duration":265,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":1,"warnings":[],"related_content_id":null,"popularity":515.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Understand Flutter's UI Approach","duration_in_time":"4:25","identifier":"3916","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3916/0219f8a9-566d-4a1b-948b-195c8728e710.png","released":true,"has_materials_url":false,"permission_tags":[]},{"id":10651007,"uri":"rw://betamax/videos/3978","name":"Explore Basic Widgets","description":"

Learn about commonly used widgets that are essential building blocks in almost every app you create.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:22:14.051Z","updated_at":"2020-08-13T11:30:40.949Z","duration":491,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":2,"warnings":[],"related_content_id":null,"popularity":217.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Explore Basic Widgets","duration_in_time":"8:11","identifier":"3978","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3978/4fa9bf81-7203-41b1-b183-981ec69890be.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651021,"uri":"rw://betamax/videos/3979","name":"Build Layouts","description":"

Build a card widget by comibining different layout widgets and learn how to use the Stack widget to lay widget on top each other.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:22:28.484Z","updated_at":"2020-08-13T10:30:34.332Z","duration":450,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":3,"warnings":[],"related_content_id":null,"popularity":98.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Build Layouts","duration_in_time":"7:30","identifier":"3979","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3979/e300ee87-6882-463d-a1ca-debff88be9f8.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651035,"uri":"rw://betamax/videos/3980","name":"Work with Images","description":"

Learn how to work with network and local images and see how assests and resources managed in Flutter apps.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:22:45.005Z","updated_at":"2020-08-13T14:30:34.692Z","duration":358,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":4,"warnings":[],"related_content_id":null,"popularity":64.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Work with Images","duration_in_time":"5:58","identifier":"3980","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3980/d6cdab3b-2e1a-4727-a742-816bc3f0cf66.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651053,"uri":"rw://betamax/videos/3981","name":"Create Scrollable Contents","description":"

Explore different widgets that are used to add scroll functionality to collections of widgets that are larger than the viewport.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:22:57.477Z","updated_at":"2020-08-14T00:30:29.590Z","duration":295,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":5,"warnings":[],"related_content_id":null,"popularity":65.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Create Scrollable Contents","duration_in_time":"4:55","identifier":"3981","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3981/77a012ef-5c53-46c7-a656-37d51f5f9a9c.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651075,"uri":"rw://betamax/videos/3982","name":"Work with BottomNavigationBar","description":"

Learn how to setup different Tab based layouts and integrate different screens with different views.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:23:19.669Z","updated_at":"2020-08-14T00:30:29.788Z","duration":363,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":6,"warnings":[],"related_content_id":null,"popularity":74.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Work with BottomNavigationBar","duration_in_time":"6:03","identifier":"3982","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3982/fa46b020-5b61-486f-a016-d9c255ae9b88.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651100,"uri":"rw://betamax/videos/3983","name":"Use the FutureBuilder Widget","description":"

Learn how to use the FutureBuilder widget to display contents gotten from an asyncronous task like fetching data online.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:23:36.792Z","updated_at":"2020-08-14T01:30:29.000Z","duration":305,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":7,"warnings":[],"related_content_id":null,"popularity":56.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Use the FutureBuilder Widget","duration_in_time":"5:05","identifier":"3983","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3983/93f90f9e-3686-4570-9e77-780ad69632e3.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651135,"uri":"rw://betamax/videos/3984","name":"Style Your App with Themes","description":"

Learn how to use themes to style your apps and switch styling based on whether the underlying OS is set to dark mode.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:24:11.972Z","updated_at":"2020-08-14T01:30:29.087Z","duration":322,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":8,"warnings":[],"related_content_id":null,"popularity":56.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Style Your App with Themes","duration_in_time":"5:22","identifier":"3984","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3984/45bb8fcc-ae17-4301-a4ca-f72bf1d7b027.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651166,"uri":"rw://betamax/videos/3985","name":"Add Navigation and SliverAppBar","description":"

Add interactions and navigation to your app and learn how to use the CustomScrollView widget to add custom scroll effects with the use of slivers.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:24:29.298Z","updated_at":"2020-08-14T01:30:29.154Z","duration":596,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":9,"warnings":[],"related_content_id":null,"popularity":64.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Add Navigation and SliverAppBar","duration_in_time":"9:56","identifier":"3985","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3985/41af3a44-825f-4d95-8fc1-e6e72d8b849f.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651203,"uri":"rw://betamax/videos/3986","name":"Work with Forms","description":"

Explore different input widgets and learn how they can be combined to create beautiful forms in your apps.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:24:56.035Z","updated_at":"2020-08-14T01:30:29.263Z","duration":599,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":10,"warnings":[],"related_content_id":null,"popularity":48.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Work with Forms","duration_in_time":"9:59","identifier":"3986","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3986/905eb80f-159a-4571-beed-ea754fdc1b0f.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651238,"uri":"rw://betamax/videos/3987","name":"Make Your App Design Responsive","description":"

Learn how to use different responsive widgets provided by Flutter to create responsive app UI.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:25:08.705Z","updated_at":"2020-08-14T01:30:29.468Z","duration":345,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":11,"warnings":[],"related_content_id":null,"popularity":52.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Make Your App Design Responsive","duration_in_time":"5:45","identifier":"3987","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3987/5649de00-9632-4fb3-af55-03d04c5e42a4.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651277,"uri":"rw://betamax/videos/3988","name":"Explore Cupertino Widgets","description":"

Explore some of the iOS style widgets provided by Flutter and learn how they can be used in your apps.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:25:23.996Z","updated_at":"2020-08-14T01:30:29.556Z","duration":433,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":12,"warnings":[],"related_content_id":null,"popularity":61.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Explore Cupertino Widgets","duration_in_time":"7:13","identifier":"3988","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3988/513841b4-ede1-4098-92ff-a3d6e07a3065.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651321,"uri":"rw://betamax/videos/3989","name":"Build iOS Styled Forms","description":"

Use cupertino based widgets to style form inputs that looks and feels native.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:25:45.614Z","updated_at":"2020-08-13T18:30:37.701Z","duration":217,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":13,"warnings":[],"related_content_id":null,"popularity":45.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Build iOS Styled Forms","duration_in_time":"3:37","identifier":"3989","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3989/b2d9ec99-06b4-4cc4-b6dd-9721df6f0c99.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]},{"id":10651371,"uri":"rw://betamax/videos/3990","name":"Adapt Designs Based on Platforms","description":"

Take the existing material-based app and adapt it to fit cupertino design specification if the underlying platform is iOS.

","released_at":"2020-07-21T13:00:00.000Z","searchable":true,"free":false,"created_at":"2020-05-20T23:26:27.500Z","updated_at":"2020-08-13T09:30:37.657Z","duration":233,"difficulty":"beginner","content_type":"episode","platform_id":56,"language_id":27,"editor_id":59,"group_id":589,"ordinal":14,"warnings":[],"related_content_id":null,"popularity":50.0,"labelled_as_new":false,"average_rating":null,"rating_count":0,"professional":false,"episode_title_with_course":"Flutter UI Widgets · Adapt Designs Based on Platforms","duration_in_time":"3:53","identifier":"3990","video_banner_url":"https://files.betamax.raywenderlich.com/attachments/videos/3990/de9646b5-12ef-4f9e-b0af-49c321b7f19f.png","released":true,"has_materials_url":true,"permission_tags":["stream-beginner-videos"]}]}]}

Get immediate access to all our expert-led videos with a raywenderlich.com subscription!