AI Features
Log In
0% completed
All Lessons
Free 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
Home
Courses
Responsive and Adaptive UI in Flutter
What You Need to Know
Get the links to other courses you might want to complete.
We'll cover the following...
You should have a
...
Ask