Flutter UI Widgets

Explore commonly used UI widgets in Flutter and see how they relate to their native iOS and Android counterparts. By Emmanuel Okiche.

4.6 (5) · 1 Review

Download materials
Save for later

Learning path

This is part of the Flutter Fundamentals learning path. View path.

Who is this for?

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

Covered concepts

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

Part 1: Flutter UI Widgets

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle description

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

Toggle 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.

Toggle description

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

Toggle description

Learn about Dialogs and use the AlertDialog to display the result of the submitted form.

Toggle description

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

Toggle description

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

Toggle description

Use Cupertino based widgets to style form inputs that look and feel native.

Toggle description

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