AI Features

0% completed

All LessonsFree Lessons (4)

Introduction

Course Overview Prerequisites and Objectives Why Adaptive and Responsive UI Matters

Basic Single-Child Layout Widgets

Single-Child Widgets for Responsive Layout The Align Widget The AspectRatio Widget The ConstrainedBox Widget The Expanded Widget The Flexible Widget Quiz Yourself: Single-Child Layout Widgets

Basic Multi-Child Layout Widgets

Multi-Child Widgets for Responsive Layout

The Column Widget

The ListView Widget

The GridView Widget

The Stack Widget

The Table Widget

The Wrap Widget

Quiz: Multi-child Layout Widgets

The Problem of Starting with a Smartphone

A Classic Flutter App There’s More Space on a Tablet What About Web and Desktop?

Measure your Sizes - Responsive UI Widgets

The MediaQuery Widget The LayoutBuilder Widget Challenge: Measure your Sizes - Responsive UI Widgets Solution: Measure your Sizes - Responsive UI Widgets Quiz Yourself: Measure your Sizes - Responsive UI Widgets

Different Widgets for Different Sizes

Show a Widget Depending on the Available Space Add a Widget on Larger Screens Add More if There’s Enough Space Challenge: Different Widgets for Different Sizes Solution: Different Widgets for Different Sizes

Avoid Gigantic Widgets

Limit the Size of a Widget Use Wrap to Fill the Space Use GridView to Layout a Grid Custom Grid for Special Cases Challenge: Resize the Settings Page Solution: Resize the Settings Page Challenge: Fill the Settings Page Solution: Fill the Settings Page

Adaptive Design

Adaptive Design for Mobile Adaptive Design for Desktop Visual Density Quiz Yourself: Adaptive Design

External Packages

Easy Responsive Design with responsive_framework Get Device Breakpoints with responsive_builder Add More Adaptive Widgets to Flutter

Conclusion

Summary and Next Steps

Appendix: Other Resources

What You Need to Know Useful Packages

Responsive and Adaptive UI in Flutter

Multi-Child Widgets for Responsive Layout

Learn to use multi-child Flutter layout widgets with responsiveness in mind.

We'll cover the following...

It’s very common for application layouts to combine different UI components. Think ...

Ask