How do you build fully responsive layouts in Flutter Web?
TL;DR: Use LayoutBuilder for widget-level constraints, MediaQuery for screen-level dimensions. Define breakpoints (mobile <600, tablet 600-1024, desktop >1024). Use AdaptiveLayout from material3 or build custom ResponsiveLayout wrapper with Flex widgets.
Full Answer
Flutter Web requires genuine responsive design — your widget tree must adapt to widths from 320px (mobile) to 2560px (4K desktop). Flutter provides several tools to achieve this.
Key Tools
- ▸LayoutBuilder: provides BoxConstraints — knows the available width without needing screen size
- ▸MediaQuery.of(context).size: screen dimensions — use for full-page layout decisions
- ▸Flexible/Expanded: fill available space proportionally in Row/Column
- ▸Wrap: wraps children to next line when they overflow
- ▸AdaptiveLayout (material3): canonical breakpoint-based layout widget
Prefer LayoutBuilder over MediaQuery inside reusable widgets. LayoutBuilder respects widget constraints (e.g., a widget in a sidebar), while MediaQuery always reflects the full screen.
Code Examples
// Mobile: 1 column // Tablet: 2 columns // Desktop: 4 columns
Common Mistakes
- ✗Hardcoding pixel values for layout — breaks at different screen sizes and accessibility text scale
- ✗Using MediaQuery in deeply nested widgets — prefer LayoutBuilder so the widget is reusable in different parent sizes
Interview Tip
Show you know LayoutBuilder (widget-level) vs MediaQuery (screen-level) and why LayoutBuilder is preferred for reusable components — it respects the widget's available space, not the whole screen.