How to Create Responsive Layout in Flutter: Simple Guide

To create a responsive layout in Flutter, use MediaQuery to get screen size and LayoutBuilder to adapt widgets based on constraints. Combine these with flexible widgets like Flexible and Expanded to build UIs that adjust smoothly on different screen sizes.

Syntax

MediaQuery provides screen size info via MediaQuery.of(context).size. LayoutBuilder gives constraints to build widgets responsively. Use Flexible and Expanded inside Row or Column to control space distribution.

dart

Size screenSize = MediaQuery.of(context).size;

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Text('Wide screen');
    } else {
      return Text('Narrow screen');
    }
  },
);

Row(
  children: [
    Flexible(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.blue)),
  ],
);

Example

This example shows a responsive layout that changes text and layout based on screen width using LayoutBuilder and MediaQuery. It uses Row and Column with Flexible and Expanded to adapt the UI.

dart

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Responsive Layout Example')),
        body: const ResponsiveWidget(),
      ),
    );
  }
}

class ResponsiveWidget extends StatelessWidget {
  const ResponsiveWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;

    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return Row(
            children: [
              Flexible(
                flex: 2,
                child: Container(color: Colors.amber, height: 200, child: const Center(child: Text('Left Panel'))),
              ),
              Flexible(
                flex: 3,
                child: Container(color: Colors.blue, height: 200, child: const Center(child: Text('Right Panel'))),
              ),
            ],
          );
        } else {
          return Column(
            children: [
              Container(color: Colors.amber, height: 100, width: screenSize.width, child: const Center(child: Text('Top Panel'))),
              Container(color: Colors.blue, height: 100, width: screenSize.width, child: const Center(child: Text('Bottom Panel'))),
            ],
          );
        }
      },
    );
  }
}

Output

On wide screens (>600px), two panels appear side by side in a row colored amber and blue with text 'Left Panel' and 'Right Panel'. On narrow screens, panels stack vertically with 'Top Panel' and 'Bottom Panel' text.

Common Pitfalls

• Not using LayoutBuilder or MediaQuery leads to fixed layouts that break on different screen sizes.
• Using fixed widths/heights instead of flexible widgets causes overflow or clipping.
• Ignoring orientation changes can cause poor user experience.

Always test on multiple screen sizes and orientations.

dart

/* Wrong: Fixed width causes overflow on small screens */
Container(
  width: 500, // fixed width
  color: Colors.red,
);

/* Right: Use flexible width with constraints */
LayoutBuilder(
  builder: (context, constraints) {
    return Container(
      width: constraints.maxWidth * 0.8, // 80% of available width
      color: Colors.green,
    );
  },
);

Quick Reference

• MediaQuery.of(context).size: Get screen width and height.
• LayoutBuilder: Build widgets based on parent constraints.
• Flexible and Expanded: Control space in Row and Column.
• Use OrientationBuilder to adapt to portrait/landscape.
• Test on multiple devices and simulators.

Key Takeaways

Use MediaQuery and LayoutBuilder to get screen size and constraints for responsive design.

Flexible and Expanded widgets help distribute space dynamically in rows and columns.

Avoid fixed sizes; prefer relative sizes based on constraints to prevent overflow.

Test your layout on different screen sizes and orientations for best results.

Use OrientationBuilder to adapt UI for portrait and landscape modes.