Responsive UI in Flutter with MediaQuery and LayoutBuilder

Creating a beautiful app is great — but making it look perfect across all screen sizes is even better. In Flutter, two powerful tools help you build responsive UI:

• MediaQuery

• LayoutBuilder

In this blog, you’ll learn how to use both to make your app adaptive and responsive across devices like phones, tablets, and desktops.

---

🔍 What is Responsive Design?

Responsive UI adapts your app’s layout to different screen sizes, resolutions, and orientations.

One layout for all screens? ❌
One layout that adapts? ✅

---

🧰 Tools Flutter Offers for Responsiveness

Tool	What it does
MediaQuery	Gives screen size, orientation, etc.
LayoutBuilder	Builds widgets based on constraints
AspectRatio	Maintains widget width-height ratios
FittedBox	Scales child widget to fit space
Flexible / Expanded	Proportional space in Row/Column

---

🧪 Example 1: Using MediaQuery

MediaQuery lets you fetch screen info like width, height, orientation, etc.

✅ Use Case: Changing layout based on screen width

import 'package:flutter/material.dart';

class MediaQueryExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: Text("MediaQuery Example")),
      body: screenWidth < 600
          ? _buildMobileLayout()
          : _buildTabletLayout(),
    );
  }

  Widget _buildMobileLayout() {
    return Center(child: Text("Mobile Layout"));
  }

  Widget _buildTabletLayout() {
    return Center(child: Text("Tablet/Desktop Layout"));
  }
}

---

📐 What MediaQuery Provides

MediaQuery.of(context).size.width      // screen width
MediaQuery.of(context).size.height     // screen height
MediaQuery.of(context).orientation     // portrait or landscape
MediaQuery.of(context).padding         // safe area padding
MediaQuery.of(context).devicePixelRatio // pixel density

---

🧪 Example 2: Using LayoutBuilder

LayoutBuilder gives you constraints of the widget — helpful for local responsiveness.

✅ Use Case: Change widget size based on available space

import 'package:flutter/material.dart';

class LayoutBuilderExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("LayoutBuilder Example")),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth < 600) {
            return _buildMobileLayout();
          } else {
            return _buildTabletLayout();
          }
        },
      ),
    );
  }

  Widget _buildMobileLayout() {
    return Center(child: Text("Mobile View"));
  }

  Widget _buildTabletLayout() {
    return Center(child: Text("Tablet View"));
  }
}

---

🔁 When to Use What?

Use Case	Use
Need entire screen info	MediaQuery
React to local container constraints	LayoutBuilder
Combine global + local layout info	Use both together

---

🧩 Example 3: Responsive Grid with LayoutBuilder

GridView.count(
  crossAxisCount: constraints.maxWidth < 600 ? 2 : 4,
  children: List.generate(20, (index) {
    return Card(
      child: Center(child: Text('Item $index')),
    );
  }),
);

---

🎨 Responsive Widgets

• Flexible & Expanded: distribute space in rows/columns

• FittedBox: scale content inside containers

• AspectRatio: maintain consistent width/height

• Wrap: create multi-line rows that wrap automatically

• FractionallySizedBox: size child as a fraction of parent

---

📱 Adaptive Layout Example with Combined Approach

class ResponsiveExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: Text("Responsive Layout")),
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (screenWidth < 480) {
            return _buildSmallScreen();
          } else if (screenWidth < 800) {
            return _buildMediumScreen();
          } else {
            return _buildLargeScreen();
          }
        },
      ),
    );
  }

  Widget _buildSmallScreen() => Center(child: Text("Mobile"));
  Widget _buildMediumScreen() => Center(child: Text("Tablet"));
  Widget _buildLargeScreen() => Center(child: Text("Desktop"));
}

---

🧪 Best Practices for Responsive Flutter Apps

✅ Define breakpoints (mobile < 600, tablet < 1024, etc.)
✅ Use Flexible for resizing within Row/Column
✅ Use SafeArea for notch/padding handling
✅ Avoid hardcoded widths/heights — use percentages or constraints
✅ Test on multiple screen sizes/emulators

---

📱 Recommended Breakpoints (Guideline)

Device	Width (px)
Small Phone	< 480
Phone	480–599
Tablet	600–1023
Desktop	1024+

---

💡 Packages to Help

Package	Use
flutter_screenutil	Responsive text and dimensions
responsive_builder	Easily build layouts per screen size
device_preview	Preview your app on multiple devices
flutter_responsive	Widget-based responsiveness helper

---

🔄 Testing Responsiveness

✅ Use Device Preview plugin in Flutter
✅ Manually resize Chrome with Flutter Web
✅ Run app in various emulators and screen sizes
✅ Try in both portrait and landscape orientations

---

🚀 Final Thoughts

Flutter gives you full control over responsive layout, whether you’re building for mobile, tablet, desktop, or web.

Use:

• MediaQuery for global screen info

• LayoutBuilder for contextual layout changes

• Responsive design patterns to keep UI consistent and adaptive

Learn  Flutter Training Course

Read More

Implementing Dark Mode in Flutter 

Building a Beautiful Login Page with Flutter

Medical Coders in Hospitals vs Private Clinics

How Medical Coding Supports Patient Care