Layouts & Responsive Design

Layouts & Responsive Design

Flutter provides powerful layout widgets that let you create responsive designs that work across different screen sizes. Understanding these layouts is key to building beautiful apps.

Common Layout Widgets

  ┌─────────────────────────────────────────────────┐
  │           Layout Widgets                        │
  ├─────────────────────────────────────────────────┤
  │                                                  │
  │  Row        → Horizontal arrangement            │
  │  ┌───┬───┬───┐                                 │
  │  │ A │ B │ C │                                 │
  │  └───┴───┴───┘                                 │
  │                                                  │
  │  Column   → Vertical arrangement                │
  │  ┌───┐                                         │
  │  │ A │                                         │
  │  ├───┤                                         │
  │  │ B │                                         │
  │  ├───┤                                         │
  │  │ C │                                         │
  │  └───┘                                         │
  │                                                  │
  │  Stack    → Overlapping elements                │
  │  ┌────────────┐                                │
  │  │  Background │                                │
  │  │   ┌───┐    │                                │
  │  │   │ B │ ← Overlay                           │
  │  │   └───┘    │                                │
  │  └────────────┘                                │
  │                                                  │
  │  Wrap    → Flow with wrapping                   │
  │  ┌───┬───┬───┐                                 │
  │  │ A │ B │ C │                                 │
  │  ├───┼───┼───┤                                 │
  │  │ D │ E │ F │                                 │
  │  └───┴───┴───┘                                 │
  │                                                  │
  └─────────────────────────────────────────────────┘

Responsive Layout Example

import 'package:flutter/material.dart';

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          if (constraints.maxWidth > 600) {
            return _buildWideLayout();
          } else {
            return _buildNarrowLayout();
          }
        },
      ),
    );
  }

  Widget _buildWideLayout() {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: Container(color: Colors.blue, child: Center(child: Text('Side Menu'))),
        ),
        Expanded(
          flex: 3,
          child: Container(color: Colors.grey[200], child: Center(child: Text('Main Content'))),
        ),
      ],
    );
  }

  Widget _buildNarrowLayout() {
    return Column(
      children: [
        Expanded(child: Container(color: Colors.blue, child: Center(child: Text('Header')))),
        Expanded(flex: 3, child: Container(color: Colors.grey[200], child: Center(child: Text('Content')))),
      ],
    );
  }
}

Key Tips for Responsive Design

• Use LayoutBuilder: Get parent constraints to make decisions
• Use MediaQuery: Get device screen size and orientation
• Avoid hardcoded sizes: Use percentages and flexible widgets
• Test on multiple devices: Phones, tablets, and desktop