Flutter WebEasy20 XP3 min read
How do you build responsive Flutter Web layouts?
TL;DR: Use LayoutBuilder to get available width and switch between mobile/tablet/desktop layouts. MediaQuery.sizeOf(context) provides screen dimensions. flutter_adaptive_scaffold (Material 3) provides built-in adaptive navigation patterns.
Full Answer
Flutter Web targets desktop browsers where users resize windows — your layout must adapt. The key tools are LayoutBuilder and MediaQuery.
Common Breakpoints
- ▸< 600px: Mobile (single column)
- ▸600–1200px: Tablet (two columns, side rail)
- ▸> 1200px: Desktop (three columns, full nav)
🎯
Prefer LayoutBuilder over MediaQuery for layout decisions — it responds to the parent's constraints, not screen size. A widget inside a side panel should use the panel's width, not the full screen width.
Code Examples
dartResponsive layout with LayoutBuilder
Output
// Mobile: single column list // Tablet: list + preview panel // Desktop: full three-column master-detail
Common Mistakes
- ✗Using MediaQuery.of(context).size.width for layout inside nested widgets — use LayoutBuilder instead
- ✗Fixed pixel widths in Flutter Web — always use constraints.maxWidth fractions or Flexible/Expanded
Interview Tip
💡
LayoutBuilder is the Flutter equivalent of CSS @media queries but more powerful — it responds to available space, not the full viewport.
#responsive#breakpoints#layoutbuilder#adaptive#flutter-web