Hey everyone, Samuel here! In 2026, your Flutter app needs to look perfect on a tiny phone, a folding tablet, a desktop window, and even on the web — all from one codebase.
Nothing kills user experience faster than a layout that breaks on different screen sizes.
Today, we’re doing a complete how-to: building fully responsive UIs using MediaQuery, LayoutBuilder, breakpoints, and the best scaling tricks in 2026. By the end of this article, you’ll have all you need to build professional apps that automatically adapt everywhere. Let’s jump in!
Why Responsive Matters + Core Concepts
First, a quick difference: Responsive design means the UI scales and reflows. Adaptive design means it completely changes the structure (e.g., showing a side menu on a tablet). In 2026, users expect buttery smooth adaptation — no overflow, no tiny text, no broken layouts. The two weapons we’ll use most:
- MediaQuery → get screen size, orientation, padding
- LayoutBuilder → get exact constraints of the parent widget
These are built-in, zero dependencies, and still the foundation.
Let’s start simple. In your home screen:
double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
bool isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
Now build a profile card:
Container(
width: screenWidth * 0.9, // 90% of screen
height: screenHeight * 0.25,
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(... glassmorphism ...),
child: Column(...)
)
See how it automatically scales?
Next, orientation handling:
if (isLandscape) {
return Row(children: [sidebar, mainContent]);
} else {
return Column(children: [header, mainContent]);
}
That already makes it way better on tablets and desktops.
Advanced — LayoutBuilder + Breakpoints
Now the real power tool: LayoutBuilder.
Wrap your Scaffold body:
LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >= 1024) return DesktopLayout();
if (constraints.maxWidth >= 600) return TabletLayout();
return MobileLayout();
},
)
We have three separate widgets: MobileLayout (stacked), TabletLayout (two-column), and DesktopLayout (sidebar + content).
The layout instantly switches as you resize the window, no refresh needed.
Scaling Magic with Flutter ScreenUtil (2026 Best Practice)
For pixel-perfect scaling across all devices, we can still use flutter_screenutil in 2026.
Add to pubspec:
dependencies:
flutter_screenutil: ^5.9.3 # latest stable
Then in the main.dart:
ScreenUtilInit(
designSize: const Size(375, 812), // iPhone 12/13 size
minTextAdapt: true,
splitScreenMode: true,
builder: (context, child) => MaterialApp(...)
)
Now you can write:
Text(’Hello’, style: TextStyle(fontSize: 16.sp)),
Container(width: 200.w, height: 50.h)
It scales fonts, padding, everything automatically. Combine this with LayoutBuilder, and you have production-ready responsive UIs.
Quick pause before we finish, I want to invite you to my free newsletter personally. Every week, I send the exact code snippets, early access to full project repos, and the latest 2026 tips that I don’t always cover in videos. It’s completely free, zero spam, and it’s the fastest way to level up. Just click this link: https://techwithsam.dev/newsletter — I’d love to see you there!
Best Practices & SafeArea
Final pro tips for 2026:
- Always wrap top-level content in SafeArea
- Use MediaQuery.padding for notches and dynamic islands
- Limit max width on large screens: ConstrainedBox(maxWidth: 1200)
- Test in all orientations + web + different window sizes
- Use const everywhere
- Profile with DevTools — responsive UIs should stay under 8ms per frame
That’s it! You now have everything to build beautiful, responsive UIs that work everywhere. If you have any questions, make sure to drop them in the comment section.
Don’t forget to join my Free Newsletter: https://techwithsam.dev/newsletter
Samuel Adekunle, Tech With Sam YouTube