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

Add a Widget on Larger Screens

Add a widget on the screen depending on data from the MediaQuery widget.

We'll cover the following...

We managed to hide the “Menu” button when the screen width was large enough. However, on ...

Ask