Creating a responsive UI in Flutter is essential to ensure that your application delivers a seamless experience across a wide variety of devices—whether it’s a smartphone, tablet, or web screen. Flutter, being a cross-platform framework, provides several powerful tools and widgets that make building responsive user interfaces both efficient and manageable.

In this article, you’ll learn how to build a responsive UI in Flutter using layout widgets, media queries, the LayoutBuilder
widget, and best practices for adaptive design.
1. Why Responsive UI Matters in Flutter
Responsive design ensures that your application adjusts smoothly to different screen sizes and orientations. Users interact with apps on various devices, and a non-responsive UI can lead to poor user experience and app abandonment. Flutter allows developers to maintain a single codebase while still supporting different device dimensions.
2. Using MediaQuery
MediaQuery
is one of the core tools in Flutter that helps fetch the current screen size and orientation. It can be used to adjust padding, margins, and component sizes accordingly.
Widget build(BuildContext context) { var screenWidth = MediaQuery.of(context).size.width; return Container( width: screenWidth < 600 ? screenWidth * 0.8 : screenWidth * 0.5, color: Colors.blue, child: Text('Responsive Box'), ); }
In this example, the width of the container adjusts based on screen width.
3. Using LayoutBuilder for Flexible Widgets
LayoutBuilder
allows you to build widgets based on the parent constraints. This is ideal when you want to create UI that adapts to parent containers dynamically.
LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth > 800) { return DesktopLayout(); } else { return MobileLayout(); } }, )
This is helpful when you want to define entirely different layouts for tablets or desktops.
4. The Flex and Expanded Widgets
You can use Row
, Column
, Flex
, Expanded
, and Flexible
widgets to create proportional layouts that adjust automatically.
Row( children: [ Expanded(child: Text('Left Side')), Expanded(child: Text('Right Side')), ], )
These widgets allocate space relative to their flex properties, making UI elements scalable and adaptive.
5. AspectRatio and FractionallySizedBox
If you’re designing components like cards, images, or custom views, using AspectRatio
and FractionallySizedBox
can ensure that the components maintain proportions across different screen sizes.
AspectRatio( aspectRatio: 16 / 9, child: Container(color: Colors.green), )
This ensures the container always maintains a 16:9 ratio regardless of device size.
6. Breakpoints and Custom Layouts
Just like CSS media breakpoints in web development, Flutter doesn’t provide built-in breakpoints—but you can define your own logic based on screen size.
Widget build(BuildContext context) { double width = MediaQuery.of(context).size.width; if (width > 1000) { return WebLayout(); } else if (width > 600) { return TabletLayout(); } else { return MobileLayout(); } }
7. Package Recommendation: responsive_builder
For an easier way to manage responsiveness, you can use third-party packages like responsive_builder
that allow you to define separate widgets for mobile, tablet, and desktop.
ScreenTypeLayout.builder( mobile: (BuildContext context) => MobileView(), tablet: (BuildContext context) => TabletView(), desktop: (BuildContext context) => DesktopView(), );
You can explore more on this package from the pub.dev package site.
Conclusion
Building responsive UI in Flutter is all about understanding how to structure widgets and layouts using screen size, parent constraints, and adaptive logic. Tools like MediaQuery
, LayoutBuilder
, and flexible layout widgets are key components in achieving this goal. By applying the right techniques and packages, you can ensure your Flutter apps are polished, user-friendly, and device-independent.