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!
Watch the full tutorial on YouTube: <a href="https://youtu.be/08bzD_LO470" target="_blank" rel="noopener nofollow">https://youtu.be/08bzD_LO470</a>
<h4>Why Responsive Matters + Core Concepts</h4>
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:
<ul>
<li>MediaQuery → get screen size, orientation, padding</li>
<li>LayoutBuilder → get exact constraints of the parent widget</li>
</ul>
These are built-in, zero dependencies, and still the foundation.
<h4>MediaQuery &amp; Basic Responsiveness</h4>
Let’s start simple. In your home screen:
<pre><code>double screenWidth = MediaQuery.of(context).size.width;
double screenHeight = MediaQuery.of(context).size.height;
bool isLandscape = MediaQuery.of(context).orientation == Orientation.landscape;
</code></pre>
Now build a profile card:
<pre><code>Container(
 width: screenWidth * 0.9, // 90% of screen
 height: screenHeight * 0.25,
 padding: const EdgeInsets.all(20),
 decoration: BoxDecoration(... glassmorphism ...),
 child: Column(...)
)
</code></pre>
See how it automatically scales?
Next, orientation handling:
<pre><code>if (isLandscape) {
 return Row(children: [sidebar, mainContent]);
} else {
 return Column(children: [header, mainContent]);
}
</code></pre>
That already makes it way better on tablets and desktops.
<h4>Advanced — LayoutBuilder + Breakpoints</h4>
Now the real power tool: LayoutBuilder.
Wrap your Scaffold body:
<pre><code>LayoutBuilder(
 builder: (context, constraints) {
 if (constraints.maxWidth &gt;= 1024) return DesktopLayout();
 if (constraints.maxWidth &gt;= 600) return TabletLayout();
 return MobileLayout();
 },
)
</code></pre>
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.
<h4>Scaling Magic with Flutter ScreenUtil (2026 Best Practice)</h4>
For pixel-perfect scaling across all devices, we can still use <a href="https://pub.dev/packages/flutter_screenutil" target="_blank" rel="noopener nofollow">flutter_screenutil</a> in 2026.
Add to pubspec:
<pre><code>dependencies:
 flutter_screenutil: ^5.9.3 # latest stable
</code></pre>
Then in the main.dart:
<pre><code>ScreenUtilInit(
 designSize: const Size(375, 812), // iPhone 12/13 size
 minTextAdapt: true,
 splitScreenMode: true,
 builder: (context, child) =&gt; MaterialApp(...)
)
</code></pre>
Now you can write:
<pre><code>Text(’Hello’, style: TextStyle(fontSize: 16.sp)),
Container(width: 200.w, height: 50.h)
</code></pre>
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: <a href="https://techwithsam.dev/newsletter" target="_blank" rel="noopener nofollow">https://techwithsam.dev/newsletter</a> — I’d love to see you there!
<h4>Best Practices &amp; SafeArea</h4>
Final pro tips for 2026:
<ul>
<li>Always wrap top-level content in SafeArea</li>
<li>Use MediaQuery.padding for notches and dynamic islands</li>
<li>Limit max width on large screens: ConstrainedBox(maxWidth: 1200)</li>
<li>Test in all orientations + web + different window sizes</li>
<li>Use const everywhere</li>
<li>Profile with DevTools — responsive UIs should stay under 8ms per frame</li>
</ul>
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: <a href="https://techwithsam.dev/newsletter" target="_blank" rel="noopener nofollow">https://techwithsam.dev/newsletter</a>
Samuel Adekunle, Tech With Sam <a href="https://youtube.com/@techwithsam" target="_blank" rel="noopener nofollow">YouTube</a>
<img src="https://media.daily.dev/image/upload/s--Y47THgzX--/f_auto/v1772150973/ugc/content_65c61f37-90ed-4185-b286-a74c583e104b?_a=BAMAMiiu0" alt="TECHWITHSAM BRUF.png">

Samuel Adekunle

A practical guide to building responsive Flutter UIs that work across phones, foldables, tablets, and web in 2026. Covers using MediaQuery for screen dimensions and orientation, LayoutBuilder with breakpoints (mobile/tablet/desktop), and flutter_screenutil for pixel-perfect scaling. Includes best practices like SafeArea usage, max-width constraints for large screens, and performance targets under 8ms per frame.

How to Build Responsive Flutter Apps for Phones, Foldables, Tablets & Web (2026)