DEV Community

Samuel Adekunle
Samuel Adekunle

Posted on • Originally published at techwithsam.dev

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

#flutter #mobile #responsivedesign #techwithsam

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.

MediaQuery & Basic Responsiveness

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;
Enter fullscreen mode Exit fullscreen mode

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(...)
)
Enter fullscreen mode Exit fullscreen mode

See how it automatically scales?

Next, orientation handling:

if (isLandscape) {
  return Row(children: [sidebar, mainContent]);
} else {
  return Column(children: [header, mainContent]);
}
Enter fullscreen mode Exit fullscreen mode

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();
  },
)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then in the main.dart:

ScreenUtilInit(
  designSize: const Size(375, 812),   // iPhone 12/13 size
  minTextAdapt: true,
  splitScreenMode: true,
  builder: (context, child) => MaterialApp(...)
)
Enter fullscreen mode Exit fullscreen mode

Now you can write:

Text(’Hello’, style: TextStyle(fontSize: 16.sp)),
Container(width: 200.w, height: 50.h)
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)