Get familiar with the basics of Flutter UI, user interface design, and adaptive applications.

Become a Flutter Developer

Flutter is an open-source software development kit (SDK) created by Google to support cross-platform application development 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 module will introduce us to the core concepts of responsive and adaptive UI in Flutter. We’ll start with common layout widgets before exploring application development using the most powerful widgets. Next, we’ll explore external packages that can extend responsiveness and adaptiveness beyond the core Flutter UI. At each step, we’ll see examples comparing and contrasting responsive and adaptive UIs with applications that do not invoke these principles. Finally, we’ll build functional widgets and application UI with hands-on coding environments. 

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

Responsive and Adaptive UI in Flutter

Here, we provide the solution to the challenge of the previous lesson. Each settings tile has the same width and height. Therefore, we can use `GridView.extent` with a proper `childAspectRatio` to easily lay out all the tiles.

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

Appendix: Other Resources

Conclusion

Solution: Fill the Settings Page