Responsive layout patterns in Flutter - Mini App: Build & Ship

Build: Responsive Layout Demo

This screen shows a responsive layout that changes based on screen width. On small screens, it stacks items vertically. On larger screens, it arranges items horizontally.

Target UI

Responsive Layout Demo

+-------------------------+
| Item 1                  |
|-------------------------|
| Item 2                  |
|-------------------------|
| Item 3                  |
+-------------------------+  (small screen stacked)

+---------------------------------------+
| Item 1 | Item 2 | Item 3              |  (large screen horizontal)
+---------------------------------------+

Use MediaQuery to detect screen width

If width < 600 pixels, show items stacked vertically

If width >= 600 pixels, show items arranged horizontally

Each item is a colored box with centered text: 'Item 1', 'Item 2', 'Item 3'

Use Flutter widgets only

Make sure layout adapts when screen size changes

Starter Code

Flutter

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    // TODO: Add responsive layout code here
    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Layout Demo')),
      body: Center(
        child: Text('Replace this with responsive layout'),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Solution

Flutter

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;
    final bool isSmallScreen = screenWidth < 600;

    Widget item(String text, Color color) {
      return Container(
        width: 100,
        height: 100,
        color: color,
        alignment: Alignment.center,
        margin: const EdgeInsets.all(8),
        child: Text(text, style: const TextStyle(color: Colors.white, fontSize: 18)),
      );
    }

    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Layout Demo')),
      body: Center(
        child: isSmallScreen
            ? Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  item('Item 1', Colors.blue),
                  item('Item 2', Colors.green),
                  item('Item 3', Colors.orange),
                ],
              )
            : Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  item('Item 1', Colors.blue),
                  item('Item 2', Colors.green),
                  item('Item 3', Colors.orange),
                ],
              ),
      ),
    );
  }
}

We use MediaQuery.of(context).size.width to find the screen width. If the width is less than 600 pixels, we show the items stacked vertically using a Column. Otherwise, we arrange them horizontally using a Row. Each item is a colored box with centered white text. This way, the layout changes automatically when the screen size changes, making it responsive.

Final Result

Completed Screen

Responsive Layout Demo

+-------------------------+
|       Item 1            |
|-------------------------|
|       Item 2            |
|-------------------------|
|       Item 3            |
+-------------------------+  (small screen stacked)

+---------------------------------------+
| Item 1 | Item 2 | Item 3              |  (large screen horizontal)
+---------------------------------------+

When the user resizes the screen or rotates the device, the layout changes between vertical and horizontal automatically.

Each colored box displays its label centered in white text.

Stretch Goal

Add a toggle button in the AppBar to switch between vertical and horizontal layout manually.

💡 Hint

Use a StatefulWidget and a boolean state variable to control layout direction. Update the layout based on this variable instead of screen width.