Flutter LayoutBuilder - Responsive Design

Although Flutter can run on both iOS and Android, it's not dynamic by default. To adapt to different screen sizes, we must create responsive designs using tools like LayoutBuilder.

Why is Multi-Screen Support Important?

Flutter applications can run on these devices:

• Small screen phones (iPhone SE)
• Large screen phones (iPhone Pro Max)
• Tablets (iPad)
• Desktop computers
• Web browsers

If you use the same fixed values on every screen size, your design may look broken on some devices.

Live Demo: LayoutBuilder Responsive Design

Try responsive design examples with LayoutBuilder by expanding from the vertical line:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

What is LayoutBuilder?

LayoutBuilder is a widget that provides the parent widget's size constraints. With this information, you can create different designs based on screen size.

Basic Usage

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return Container(
      width: constraints.maxWidth,
      height: constraints.maxHeight,
      child: Text('Current width: ${constraints.maxWidth}'),
    );
  },
)

BoxConstraints Properties

• maxWidth: Current maximum width
• maxHeight: Current maximum height
• minWidth: Minimum width
• minHeight: Minimum height

Method 1: Design for Each Screen

You can show different layouts by checking screen size.

Defining Breakpoints

class ScreenSize {
  static bool isSmall(double width) => width < 600;
  static bool isMedium(double width) => width >= 600 && width < 900;
  static bool isLarge(double width) => width >= 900;
}

Responsive Widget Example

class ResponsiveLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth < 600) {
          // Small screen (Mobile)
          return _buildMobileLayout();
        } else if (constraints.maxWidth < 900) {
          // Medium screen (Tablet)
          return _buildTabletLayout();
        } else {
          // Large screen (Desktop)
          return _buildDesktopLayout();
        }
      },
    );
  }

  Widget _buildMobileLayout() {
    return Column(
      children: [
        AppBar(title: Text('Mobile View')),
        Expanded(
          child: ListView(
            children: [
              _buildCard('Item 1'),
              _buildCard('Item 2'),
              _buildCard('Item 3'),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildTabletLayout() {
    return Row(
      children: [
        // Side panel
        Container(
          width: 200,
          color: Colors.grey[200],
          child: ListView(
            children: [
              ListTile(title: Text('Menu 1')),
              ListTile(title: Text('Menu 2')),
            ],
          ),
        ),
        // Main content
        Expanded(
          child: Column(
            children: [
              AppBar(title: Text('Tablet View')),
              Expanded(
                child: GridView.count(
                  crossAxisCount: 2,
                  children: [
                    _buildCard('Item 1'),
                    _buildCard('Item 2'),
                    _buildCard('Item 3'),
                    _buildCard('Item 4'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildCard(String title) {
    return Card(
      margin: EdgeInsets.all(8),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Center(child: Text(title)),
      ),
    );
  }
}

Summary

LayoutBuilder with responsive design:

1. Detect screen size: constraints.maxWidth and constraints.maxHeight
2. Design with breakpoints: Mobile, tablet, desktop
3. Proportional sizing: Using percentage values
4. Different image resolutions: Performance optimization
5. Dynamic layout: Column count, padding, font size

Best Practices:

• Use standard breakpoints (600px, 900px)
• Prefer proportional values
• Test on every device
• Pay attention to performance

LayoutBuilder is the foundation of making professional applications that look perfect on every device in Flutter!