Responsive Design
MediaQuery, LayoutBuilder, and adaptive layouts
Build layouts that adapt to any screen size using MediaQuery, LayoutBuilder, and breakpoints.
Access screen size, orientation, padding, and text scale. Use it to make layout decisions based on device.
final size = MediaQuery.of(context).size;
final width = size.width;
final orientation =
MediaQuery.of(context).orientation;
// Conditional layout
if (width > 600) {
return WideLayout();
} else {
return NarrowLayout();
}Mobile120px
Content
Cards stack vertically
< 600px