Press enter or click to view image in full size

Flutter

Dart

Row

Column

Flexible

Using Row and Column for Flexible Layouts

Harsh Kumar Khatri

6 min read

·

Jun 26, 2025

--

Listen

Share

Introduction

In Flutter, creating intuitive and responsive layouts is key to building user-friendly applications that work seamlessly across different devices. At the heart of Flutter’s layout system are the Row and Column widgets, which allow developers to arrange UI elements horizontally or vertically with flexibility and precision. These widgets are fundamental for crafting adaptive layouts without complex coding. This article explores how to use Row and Column to build flexible layouts, diving into their properties, use cases, and practical examples to help beginners and intermediate developers create polished Flutter interfaces.

What Are Row and Column Widgets?

The Row and Column widgets are Flutter’s primary layout widgets for arranging child widgets in a linear fashion:

• Row: Arranges its children horizontally, from left to right.
• Column: Arranges its children vertically, from top to bottom.

Both widgets are highly customizable, allowing you to control alignment, spacing, and sizing of child widgets. They are the building blocks for creating complex layouts, often used in combination with other widgets like Container, Expanded, and Flexible to achieve responsiveness.

Why Use Row and Column?

• Simplicity: Provide an intuitive way to align UI elements linearly.
• Flexibility: Support responsive designs that adapt to different screen sizes and orientations.
• Composability: Work seamlessly with other Flutter widgets to create complex layouts.
• Efficiency: Lightweight and optimized for Flutter’s rendering pipeline.

Without Row and Column, you’d need to rely on more complex positioning techniques, making layout development cumbersome.

Key Properties of Row and Column

Both Row and Column share similar properties that control how their children are arranged:

• children: A list of widgets to display (e.g., Text, Container, Icon).
• mainAxisAlignment: Controls alignment along the main axis (horizontal for Row, vertical for Column).
• Options: start, end, center, spaceBetween, spaceAround, spaceEvenly.
• crossAxisAlignment: Controls alignment along the cross axis (vertical for Row, horizontal for Column).
• Options: start, end, center, stretch, baseline.
• mainAxisSize: Determines whether the widget takes the minimum (MainAxisSize.min) or maximum (MainAxisSize.max) space along the main axis.

These properties make Row and Column versatile for creating a wide range of layouts.

Building Layouts with Row and Column

Let’s explore how to use Row and Column to create flexible layouts, with examples to illustrate their capabilities.

1. Basic Row and Column Layout

Here’s a simple example of a Row and Column to arrange widgets:

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const BasicLayoutScreen(),
    );
  }
}
class BasicLayoutScreen extends StatelessWidget {
  const BasicLayoutScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Row and Column Layout')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Top Text', style: TextStyle(fontSize: 20)),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                color: Colors.blue,
                width: 100,
                height: 100,
                child: const Center(child: Text('Box 1', style: TextStyle(color: Colors.white))),
              ),
              Container(
                color: Colors.green,
                width: 100,
                height: 100,
                child: const Center(child: Text('Box 2', style: TextStyle(color: Colors.white))),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

In this example:

• The Column arranges a Text widget and a Row vertically, centered on the screen.
• The Row places two Container widgets horizontally, spaced evenly.
• The SizedBox adds vertical spacing between the Text and Row.

2. Using Expanded for Flexible Sizing

The Expanded widget, used within Row or Column, allows children to take up available space proportionally, making layouts responsive.

Example: A Row with flexible containers:

class FlexibleLayoutScreen extends StatelessWidget {
  const FlexibleLayoutScreen({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flexible Row Layout')),
      body: Row(
        children: [
          Expanded(
            flex: 2,
            child: Container(
              color: Colors.blue,
              child: const Center(child: Text('2/5 Space', style: TextStyle(color: Colors.white))),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              color: Colors.green,
              child: const Center(child: Text('3/5 Space', style: TextStyle(color: Colors.white))),
            ),
          ),
        ],
      ),
    );
  }
}

In this example:

• The Expanded widgets divide the Row’s width based on their flex values (2:3 ratio).
• The first container takes 2/5 of the available width, and the second takes 3/5, making the layout responsive to screen size.

3. Combining Row and Column for Complex Layouts

You can nest Row and Column widgets to create complex, grid-like layouts.

Example: A dashboard-style layout:

class DashboardScreen extends StatelessWidget {
  const DashboardScreen({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Dashboard Layout')),
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    color: Colors.blue,
                    child: const Center(child: Text('Top Left', style: TextStyle(color: Colors.white))),
                  ),
                ),
                Expanded(
                  child: Container(
                    color: Colors.green,
                    child: const Center(child: Text('Top Right', style: TextStyle(color: Colors.white))),
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.orange,
              child: const Center(child: Text('Bottom Section', style: TextStyle(color: Colors.white))),
            ),
          ),
        ],
      ),
    );
  }
}

This creates a layout with:

• A top Row splitting the screen into two equal columns.
• A bottom Container taking up the remaining vertical space.
• Expanded ensures each section scales to fill available space.

4. Handling Overflow with Scrollable Widgets

If a Row or Column contains too many children to fit on the screen, you can wrap it in a SingleChildScrollView to make it scrollable.

Example:

class ScrollableLayoutScreen extends StatelessWidget {
  const ScrollableLayoutScreen({Key? key}) : super(key: key);
@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Scrollable Column')),
      body: SingleChildScrollView(
        child: Column(
          children: List.generate(
            20,
            (index) => Container(
              height: 100,
              color: index % 2 == 0 ? Colors.blue : Colors.green,
              child: Center(child: Text('Item $index', style: const TextStyle(color: Colors.white))),
            ),
          ),
        ),
      ),
    );
  }
}

This creates a scrollable Column with 20 items, preventing overflow on smaller screens.

Best Practices for Using Row and Column

1. Use Expanded or Flexible for Responsiveness:

• Wrap children in Expanded or Flexible to make layouts adapt to different screen sizes.

2. Avoid Hardcoding Sizes:

• Use relative sizing (e.g., with MediaQuery or Expanded) instead of fixed pixel values.

3. Add Spacing with SizedBox:

• Use SizedBox for consistent spacing between children instead of relying on padding or margins.

4. Combine with SafeArea:

• Wrap Row or Column in a SafeArea to avoid notches or status bars:

body: SafeArea(child: Column(children: [/* Your widgets */]))

5. Test Across Devices:

• Test layouts on different screen sizes and orientations to ensure responsiveness.

Common Pitfalls and Solutions

1. Overflow Errors:

• Problem: Children exceed the available space, causing a yellow/black striped error.
• Solution: Use Expanded, Flexible, or wrap in SingleChildScrollView.

2. Misaligned Content:

• Problem: Widgets don’t align as expected.
• Solution: Adjust mainAxisAlignment and crossAxisAlignment properties.

3. Unintended Stretching:

• Problem: Widgets stretch unexpectedly in a Row or Column.
• Solution: Set mainAxisSize: MainAxisSize.min to use minimal space.

Example: A Responsive Card Layout

Here’s a comprehensive example of a responsive layout using Row and Column:

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CardLayoutScreen(),
    );
  }
}
class CardLayoutScreen extends StatelessWidget {
  const CardLayoutScreen({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final double screenWidth = MediaQuery.of(context).size.width;
    final bool isLargeScreen = screenWidth > 600;
    return Scaffold(
      appBar: AppBar(title: const Text('Responsive Card Layout')),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              isLargeScreen
                  ? Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        Expanded(child: _buildCard('Card 1')),
                        Expanded(child: _buildCard('Card 2')),
                      ],
                    )
                  : Column(
                      children: [
                        _buildCard('Card 1'),
                        const SizedBox(height: 20),
                        _buildCard('Card 2'),
                      ],
                    ),
            ],
          ),
        ),
      ),
    );
  }
  Widget _buildCard(String title) {
    return Container(
      height: 200,
      margin: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(child: Text(title, style: const TextStyle(color: Colors.white, fontSize: 20))),
    );
  }
}

This example:

• Uses MediaQuery to detect large screens (>600px width).
• Displays cards side-by-side in a Row on large screens or stacked in a Column on smaller screens.
• Wraps the layout in SafeArea and SingleChildScrollView for responsiveness.

Conclusion

The Row and Column widgets are essential tools for building flexible, responsive layouts in Flutter. By leveraging their properties like mainAxisAlignment, crossAxisAlignment, and Expanded, you can create interfaces that adapt to various screen sizes and orientations. Whether you’re arranging simple UI elements or crafting complex dashboards, Row and Column provide the foundation for intuitive designs.

Experiment with the examples provided, combine Row and Column with other widgets, and follow best practices to create polished Flutter apps. With these tools in your toolkit, you’re ready to build layouts that look great on any device!