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 Row 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

Solution: Resize the Settings Page

Find the solution to the last challenge.

We'll cover the following...

In this lesson, we provide the solutions to the previous lesson’s challenge. The first approach we can attempt is to constrain the entire ListView to 500 pixels. ...

Ask