Gain insights into responsive and adaptive UI in Flutter, explore powerful widgets, external packages, and hands-on coding to build user-friendly, cross-platform applications.

app.tar.gz

why_matters_job

run_local_files

Flutter is an open-source software development kit (SDK) created by Google to support cross-platform application development for online and in the most popular consumer operating systems. Understanding Flutter’s user interface (UI) approach can help unlock robust application development across all these environments.

This course will introduce you to the core concepts of responsive and adaptive UI in Flutter. You’ll start with common layout widgets before exploring application development using the most powerful widgets. Next, you’ll explore external packages that can extend responsiveness and adaptiveness beyond the core Flutter UI. At each step, you’ll see examples comparing and contrasting responsive and adaptive UIs with applications that do not invoke these principles. Finally, you’ll build functional widgets and application UI with hands-on coding environments

By the end of this course, you’ll be able to build user-friendly applications in Flutter using responsive and adaptive UI principles.

Responsive and Adaptive UI in Flutter

The [responsive_framework](https://pub.dev/packages/responsive_framework) helps you make your application responsive. It automatically scales the UI when the screen is larger.

Another package that can help with responsive design is [Flexfold](https://rydmike.com/flexfold.html), Unfortunately, it’s not published on [pub.dev](https://pub.dev/) yet.

Finally, [responsive_builder](https://pub.dev/packages/responsive_builder) provides some widgets that require less code when you implement responsive design in your applications.

# Adaptive design

The [macos_ui](https://pub.dev/packages/macos_ui) provides widgets in the style of Apple’s macOS.

The [fluent_ui](https://pub.dev/packages/fluent_ui) is an unofficial implementation of Fluent UI, the design used by Microsoft Windows.

For Ubuntu Linux, there are different packages that can be combined together for a good result:

- [yaru](https://pub.dev/packages/yaru) for the look and feel.
- [yaru_icons](https://pub.dev/packages/yaru_icons) for the icons.
- [yaru_widgets](https://pub.dev/packages/yaru_widgets) for ready-made full widgets.

Other packages useful for Linux, but not discussed in this course, are: [adwaita](https://pub.dev/packages/adwaita) and [libadwaita](https://pub.dev/packages/libadwaita).

Other useful resources are the official design guides for [macOS](https://developer.apple.com/design/human-interface-guidelines/macos/overview/themes/),
[Fluent UI](https://developer.microsoft.com/en-us/fluentui#/), and [Yaru](https://github.com/ubuntu/yaru).

Another approach to tackle adaptability is to use the same design for all platforms. The [stockholm](https://pub.dev/packages/stockholm) package aims to provide a design that’s familiar to both macOS and Windows users without replicating their design guidelines.

[flutter_platform_widgets](https://pub.dev/packages/flutter_platform_widgets) extends the existing `adaptive` widgets in the Flutter framework. It only supports mobile for now.

Go through the links to the packages mentioned in the course.

Introduction

Basic Single-Child Layout Widgets

Basic Multi-Child Layout Widgets

The Problem of Starting with a Smartphone

Measure your Sizes - Responsive UI Widgets

Different Widgets for Different Sizes

Avoid Gigantic Widgets

Adaptive Design

External Packages

Conclusion

Appendix: Other Resources

Useful Packages