Flutter Row and Column – Detailed Notes

Row and Column are fundamental Flutter layout widgets used to arrange multiple widgets in a one-dimensional layout. A Row arranges its children horizontally, while a Column arranges its children vertically. Both are based on Flutter's Flex layout system. Flutter Row API | Flutter Column API

JustAcademy's Flutter curriculum includes Row and Column as core layout widgets along with Container and Stack in its Flutter Widgets and UI Design module. JustAcademy Flutter Training

1. What is Row in Flutter?

The Row widget displays its children in a horizontal arrangement. It is useful when multiple widgets need to appear from left to right.

Row(
  children: [
    Text('Home'),
    Text('About'),
    Text('Contact'),
  ],
)

Conceptually, the layout looks like:

Home    About    Contact
  →       →         →

According to the Flutter API documentation, Row is a widget that displays its children in a horizontal array. View Row Documentation

2. What is Column in Flutter?

The Column widget displays its children in a vertical arrangement. It is useful when widgets need to appear from top to bottom.

Column(
  children: [
    Text('Home'),
    Text('About'),
    Text('Contact'),
  ],
)

Conceptually, the layout looks like:

Home
  ↓
About
  ↓
Contact

Flutter's API documentation defines Column as a widget that displays its children in a vertical array. View Column Documentation

3. Row vs Column

4. Basic Row Syntax

Row(
  children: [
    Widget1(),
    Widget2(),
    Widget3(),
  ],
)

Example

Row(
  children: [
    const Icon(Icons.home),
    const Text('Home'),
    const Icon(Icons.arrow_forward),
  ],
)

5. Basic Column Syntax

Column(
  children: [
    Widget1(),
    Widget2(),
    Widget3(),
  ],
)

Example

Column(
  children: [
    const Icon(Icons.person),
    const Text('John Doe'),
    const Text('Flutter Developer'),
  ],
)

6. Understanding Main Axis and Cross Axis

Understanding the main axis and cross axis is one of the most important concepts when working with Row and Column.

For Row

• Main axis: Horizontal.
• Cross axis: Vertical.

Row
Main Axis → → → → →

Cross Axis
    ↓
    ↓
    ↓

For Column

• Main axis: Vertical.
• Cross axis: Horizontal.

Column
Cross Axis →
           ↓
Main       ↓
Axis       ↓
           ↓

7. MainAxisAlignment

MainAxisAlignment controls how children are positioned along the main axis.

For Row, this means horizontal positioning. For Column, this means vertical positioning.

Common MainAxisAlignment Values

8. Row with MainAxisAlignment.start

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    Container(width: 60, height: 60, color: Colors.red),
    Container(width: 60, height: 60, color: Colors.green),
    Container(width: 60, height: 60, color: Colors.blue),
  ],
)

The children are placed at the beginning of the Row.

9. Row with MainAxisAlignment.center

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Icon(Icons.home),
    const SizedBox(width: 10),
    const Text('Home'),
  ],
)

The children are grouped in the center horizontally.

10. Row with MainAxisAlignment.end

Row(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    const Icon(Icons.settings),
    const SizedBox(width: 10),
    const Text('Settings'),
  ],
)

The children are positioned toward the end of the Row.

11. MainAxisAlignment.spaceBetween

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    const Text('Home'),
    const Text('About'),
    const Text('Contact'),
  ],
)

Available extra space is distributed between the children. There is no additional space before the first or after the last child.

Home             About             Contact

12. MainAxisAlignment.spaceAround

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    const Icon(Icons.home),
    const Icon(Icons.search),
    const Icon(Icons.person),
  ],
)

Space is distributed around each child.

13. MainAxisAlignment.spaceEvenly

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    const Icon(Icons.home),
    const Icon(Icons.search),
    const Icon(Icons.person),
  ],
)

Equal-sized spaces are placed between the children and at the beginning and end.

14. Column with MainAxisAlignment

For Column, MainAxisAlignment controls vertical positioning.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Text('First'),
    const Text('Second'),
    const Text('Third'),
  ],
)

The three widgets are grouped vertically around the center.

15. CrossAxisAlignment

CrossAxisAlignment controls how children are positioned along the cross axis.

Common Values

• CrossAxisAlignment.start
• CrossAxisAlignment.end
• CrossAxisAlignment.center
• CrossAxisAlignment.stretch
• CrossAxisAlignment.baseline

16. Row with CrossAxisAlignment.center

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    const Icon(
      Icons.person,
      size: 50,
    ),
    const SizedBox(width: 15),
    const Text(
      'John Doe',
      style: TextStyle(fontSize: 20),
    ),
  ],
)

The children are centered along the Row's vertical cross axis.

17. Column with CrossAxisAlignment.start

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Text(
      'Flutter Course',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
    const Text('Learn Flutter development.'),
    const Text('Build real applications.'),
  ],
)

The children are aligned toward the beginning of the horizontal cross axis.

18. CrossAxisAlignment.stretch

CrossAxisAlignment.stretch causes children to stretch across the available cross-axis extent when the constraints permit it.

Column Example

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      height: 60,
      color: Colors.blue,
    ),
    const SizedBox(height: 10),
    Container(
      height: 60,
      color: Colors.green,
    ),
  ],
)

This is useful for creating full-width sections or buttons inside a Column.

19. MainAxisSize

MainAxisSize controls how much space the Row or Column occupies along its main axis.

MainAxisSize.max

Column(
  mainAxisSize: MainAxisSize.max,
  children: [
    const Text('Hello'),
    const Text('Flutter'),
  ],
)

MainAxisSize.max attempts to use the maximum available space along the main axis.

MainAxisSize.min

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    const Text('Hello'),
    const Text('Flutter'),
  ],
)

MainAxisSize.min sizes the Row or Column around the space required by its children, subject to the incoming constraints.

20. Row with Icon and Text

A very common use of Row is to display an icon next to text.

Row(
  children: [
    const Icon(
      Icons.email,
      color: Colors.blue,
    ),
    const SizedBox(width: 10),
    const Text(
      '[email protected]',
      style: TextStyle(
        fontSize: 16,
      ),
    ),
  ],
)

21. Column with Text and Buttons

A Column is commonly used to arrange headings, descriptions and buttons vertically.

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Text(
      'Welcome',
      style: TextStyle(
        fontSize: 28,
        fontWeight: FontWeight.bold,
      ),
    ),
    const SizedBox(height: 10),
    const Text(
      'Learn Flutter and build beautiful applications.',
    ),
    const SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {},
      child: const Text('Get Started'),
    ),
  ],
)

22. Using SizedBox with Row and Column

SizedBox is often used to create spacing between children.

Row Spacing

Row(
  children: [
    const Text('Home'),
    const SizedBox(width: 20),
    const Text('About'),
    const SizedBox(width: 20),
    const Text('Contact'),
  ],
)

Column Spacing

Column(
  children: [
    const Text('Name'),
    const SizedBox(height: 10),
    const Text('Email'),
    const SizedBox(height: 10),
    const Text('Phone'),
  ],
)

23. Row with Container Widgets

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
      width: 80,
      height: 80,
      color: Colors.red,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.green,
    ),
    Container(
      width: 80,
      height: 80,
      color: Colors.blue,
    ),
  ],
)

24. Column with Container Widgets

Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Container(
      width: 200,
      height: 60,
      color: Colors.red,
    ),
    Container(
      width: 200,
      height: 60,
      color: Colors.green,
    ),
    Container(
      width: 200,
      height: 60,
      color: Colors.blue,
    ),
  ],
)

25. Combining Row and Column

Real Flutter interfaces frequently combine Row and Column to create complex layouts.

Column(
  children: [
    Row(
      children: [
        const Icon(Icons.person),
        const SizedBox(width: 10),
        const Text('John Doe'),
      ],
    ),
    const SizedBox(height: 20),
    Row(
      children: [
        const Icon(Icons.email),
        const SizedBox(width: 10),
        const Text('[email protected]'),
      ],
    ),
  ],
)

Here, the outer Column arranges information vertically while each inner Row arranges an icon and text horizontally.

26. Nested Row and Column Example

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Text(
      'User Profile',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    ),
    const SizedBox(height: 20),
    Row(
      children: [
        const CircleAvatar(
          radius: 35,
          child: Icon(Icons.person),
        ),
        const SizedBox(width: 15),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              'John Doe',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 5),
            const Text('Flutter Developer'),
          ],
        ),
      ],
    ),
  ],
)

27. Using Expanded with Row

Expanded allows a child of Row, Column or Flex to expand and occupy available space along the main axis.

Row(
  children: [
    Expanded(
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
    const SizedBox(width: 10),
    Expanded(
      child: Container(
        height: 100,
        color: Colors.green,
      ),
    ),
  ],
)

The two Expanded widgets share the available horizontal space.

Flutter's Row documentation recommends Expanded when a child needs to fill remaining horizontal space. Flutter Expanded API

28. Expanded with Different Flex Values

The flex value determines how remaining space is distributed among flexible children.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(
        height: 100,
        color: Colors.red,
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        height: 100,
        color: Colors.blue,
      ),
    ),
  ],
)

The second Container receives twice the flex allocation of the first.

29. Expanded with Column

Expanded can also be used vertically inside a Column.

Column(
  children: [
    const Text(
      'Header',
      style: TextStyle(fontSize: 24),
    ),
    Expanded(
      child: Container(
        width: double.infinity,
        color: Colors.blue,
        child: const Center(
          child: Text(
            'Remaining Space',
            style: TextStyle(
              color: Colors.white,
            ),
          ),
        ),
      ),
    ),
    const Text('Footer'),
  ],
)

30. Flexible with Row and Column

Flexible provides flexibility to a child without requiring it to fill all of its allocated space. This differs from Expanded, which uses a tight fit by default.

Row(
  children: [
    Flexible(
      child: Container(
        padding: const EdgeInsets.all(20),
        color: Colors.blue,
        child: const Text(
          'This content can use flexible space.',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
      ),
    ),
  ],
)

View Flexible API Documentation

31. Row Overflow Problem

A Row does not automatically scroll. If its non-flexible children require more horizontal space than is available, the Row can overflow.

Row(
  children: [
    const Text(
      'This is a very long text that may cause overflow on small screens.',
    ),
    const Icon(Icons.star),
  ],
)

On a narrow screen, this can produce a yellow-and-black overflow warning.

Flutter's documentation specifically identifies oversized non-flexible Row children as a common cause of overflow. Row Overflow Documentation

32. Fixing Row Overflow with Expanded

Row(
  children: [
    Expanded(
      child: Text(
        'This long text can wrap inside the available space.',
      ),
    ),
    const Icon(Icons.star),
  ],
)

Expanded gives the Text a constrained width based on the remaining horizontal space, allowing the text to wrap.

33. Fixing Long Horizontal Content with Flexible

Row(
  children: [
    const Icon(Icons.info),
    const SizedBox(width: 10),
    Flexible(
      child: Text(
        'This is a long message that should adapt to the available width.',
      ),
    ),
  ],
)

34. Column Overflow Problem

Column also does not scroll automatically. If its children require more vertical space than is available, the Column can overflow.

Column(
  children: [
    Container(height: 300, color: Colors.red),
    Container(height: 300, color: Colors.green),
    Container(height: 300, color: Colors.blue),
  ],
)

This can overflow when the available vertical space is smaller than the total height of the children.

35. Fixing Column Overflow with SingleChildScrollView

When a vertical collection of content needs to scroll, wrap the Column in a scrolling widget such as SingleChildScrollView.

SingleChildScrollView(
  child: Column(
    children: [
      Container(
        height: 300,
        color: Colors.red,
      ),
      Container(
        height: 300,
        color: Colors.green,
      ),
      Container(
        height: 300,
        color: Colors.blue,
      ),
    ],
  ),
)

Flutter's Row and Column documentation recommends a scrolling widget when the content does not fit within the available space. SingleChildScrollView API

36. Important Expanded Rule in Scrollable Columns

A common mistake is placing Expanded inside a Column that has unbounded height, such as a Column inside a vertically scrolling area. Expanded needs remaining finite space to divide among flexible children.

Problematic Pattern

SingleChildScrollView(
  child: Column(
    children: [
      Expanded(
        child: Container(
          color: Colors.blue,
        ),
      ),
    ],
  ),
)

In this situation, the Column may not have a finite amount of remaining vertical space for Expanded to consume.

37. Row with Text and Icon

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    const Icon(
      Icons.check_circle,
      color: Colors.green,
    ),
    const SizedBox(width: 10),
    const Expanded(
      child: Text(
        'Your payment has been successfully completed.',
      ),
    ),
  ],
)

This is a useful pattern for notifications, status messages and list items.

38. Creating a Navigation Row

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        Icon(Icons.home),
        SizedBox(height: 4),
        Text('Home'),
      ],
    ),
    Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        Icon(Icons.search),
        SizedBox(height: 4),
        Text('Search'),
      ],
    ),
    Column(
      mainAxisSize: MainAxisSize.min,
      children: const [
        Icon(Icons.person),
        SizedBox(height: 4),
        Text('Profile'),
      ],
    ),
  ],
)

39. Creating a Login Form with Column

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    const Text(
      'Login',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontSize: 28,
        fontWeight: FontWeight.bold,
      ),
    ),
    const SizedBox(height: 20),
    const TextField(
      decoration: InputDecoration(
        labelText: 'Email',
        border: OutlineInputBorder(),
      ),
    ),
    const SizedBox(height: 15),
    const TextField(
      obscureText: true,
      decoration: InputDecoration(
        labelText: 'Password',
        border: OutlineInputBorder(),
      ),
    ),
    const SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {},
      child: const Text('Login'),
    ),
  ],
)

40. Creating a Profile Row

Row(
  children: [
    const CircleAvatar(
      radius: 30,
      child: Icon(Icons.person),
    ),
    const SizedBox(width: 15),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          'John Doe',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        SizedBox(height: 5),
        Text('Flutter Developer'),
      ],
    ),
  ],
)

41. Creating a Product Information Layout

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Container(
      width: 100,
      height: 100,
      color: Colors.grey.shade200,
      child: const Icon(
        Icons.shopping_bag,
        size: 50,
      ),
    ),
    const SizedBox(width: 15),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text(
            'Flutter Course',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 5),
          const Text(
            'Learn Flutter development with practical examples.',
          ),
          const SizedBox(height: 10),
          const Text(
            '₹999',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
            ),
          ),
        ],
      ),
    ),
  ],
)

42. Combining Row, Column and Container

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(15),
    boxShadow: const [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 8,
        offset: Offset(0, 4),
      ),
    ],
  ),
  child: Row(
    children: [
      Container(
        width: 70,
        height: 70,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(12),
        ),
        child: const Icon(
          Icons.flutter_dash,
          color: Colors.white,
          size: 40,
        ),
      ),
      const SizedBox(width: 15),
      const Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Flutter Development',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 5),
            Text(
              'Build cross-platform applications.',
            ),
          ],
        ),
      ),
    ],
  ),
)

43. Row and Column with Center

Row and Column can be placed inside Center when the entire layout needs to be centered.

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      const Icon(
        Icons.flutter_dash,
        size: 70,
      ),
      const SizedBox(height: 15),
      const Text(
        'Welcome to Flutter',
        style: TextStyle(
          fontSize: 24,
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
)

44. Row and Column with Padding

Padding(
  padding: const EdgeInsets.all(20),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text(
        'Dashboard',
        style: TextStyle(
          fontSize: 28,
          fontWeight: FontWeight.bold,
        ),
      ),
      const SizedBox(height: 20),
      Row(
        children: [
          Expanded(
            child: Container(
              height: 100,
              color: Colors.blue,
            ),
          ),
          const SizedBox(width: 15),
          Expanded(
            child: Container(
              height: 100,
              color: Colors.green,
            ),
          ),
        ],
      ),
    ],
  ),
)

45. Creating a Responsive Row

When building responsive applications, Row layouts should account for narrow screens. Flexible children, Expanded, Wrap, or scrolling layouts can be used depending on the design.

Row(
  children: [
    Expanded(
      child: Container(
        height: 100,
        color: Colors.blue,
        child: const Center(
          child: Text(
            'Item 1',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
    const SizedBox(width: 10),
    Expanded(
      child: Container(
        height: 100,
        color: Colors.green,
        child: const Center(
          child: Text(
            'Item 2',
            style: TextStyle(color: Colors.white),
          ),
        ),
      ),
    ),
  ],
)

46. When to Use Wrap Instead of Row

A Row keeps children on one horizontal line and does not automatically move them to another line. If items should wrap onto multiple lines when space is limited, consider using Wrap.

Wrap(
  spacing: 10,
  runSpacing: 10,
  children: [
    Chip(label: Text('Flutter')),
    Chip(label: Text('Dart')),
    Chip(label: Text('Firebase')),
    Chip(label: Text('Android')),
    Chip(label: Text('iOS')),
  ],
)

47. Row vs Wrap

48. Row vs ListView

If you need horizontally scrolling content rather than a fixed horizontal arrangement, use a horizontally scrolling ListView.

ListView(
  scrollDirection: Axis.horizontal,
  children: [
    Container(width: 200, color: Colors.red),
    Container(width: 200, color: Colors.green),
    Container(width: 200, color: Colors.blue),
  ],
)

Flutter's Row documentation specifically recommends ListView when horizontal content needs to scroll. Row Documentation

49. Text Baseline Alignment in Row

When different text widgets have different font sizes, CrossAxisAlignment.baseline can be useful for aligning their text baselines.

Row(
  crossAxisAlignment: CrossAxisAlignment.baseline,
  textBaseline: TextBaseline.alphabetic,
  children: const [
    Text(
      'Flutter',
      style: TextStyle(
        fontSize: 30,
      ),
    ),
    SizedBox(width: 10),
    Text(
      'Development',
      style: TextStyle(
        fontSize: 18,
      ),
    ),
  ],
)

When using baseline alignment, a suitable textBaseline must also be provided. Row Constructor Documentation

50. Understanding the Row Layout Algorithm

At a high level, Row first lays out non-flexible children, calculates the remaining horizontal space, distributes that space among flexible children according to their flex factors, and then positions the children according to the alignment settings.

1. Non-flexible children are laid out first.
2. Remaining horizontal space is calculated.
3. Space is divided among flexible children according to flex values.
4. Flexible children are laid out within their allocated space.
5. The Row determines its height and width.
6. Children are positioned using mainAxisAlignment and crossAxisAlignment.

For the complete algorithm, refer to the official Row documentation. Row Layout Algorithm

51. Understanding the Column Layout Algorithm

Column follows a similar process but works vertically.

1. Non-flexible children are laid out first.
2. Remaining vertical space is calculated.
3. Space is distributed among flexible children according to flex values.
4. Flexible children are laid out within their allocated space.
5. The Column determines its width and height.
6. Children are positioned using mainAxisAlignment and crossAxisAlignment.

Column Layout Algorithm

52. Practical Dashboard Example

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    const Text(
      'Dashboard',
      style: TextStyle(
        fontSize: 28,
        fontWeight: FontWeight.bold,
      ),
    ),
    const SizedBox(height: 20),
    Row(
      children: [
        Expanded(
          child: Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(15),
            ),
            child: const Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(
                  Icons.people,
                  color: Colors.white,
                ),
                SizedBox(height: 10),
                Text(
                  '1,250',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Users',
                  style: TextStyle(
                    color: Colors.white70,
                  ),
                ),
              ],
            ),
          ),
        ),
        const SizedBox(width: 15),
        Expanded(
          child: Container(
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(15),
            ),
            child: const Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(
                  Icons.shopping_cart,
                  color: Colors.white,
                ),
                SizedBox(height: 10),
                Text(
                  '850',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  'Orders',
                  style: TextStyle(
                    color: Colors.white70,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    ),
  ],
)

53. Complete Row and Column Example

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(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Row and Column'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text(
                'My Profile',
                style: TextStyle(
                  fontSize: 28,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 20),
              Row(
                children: [
                  const CircleAvatar(
                    radius: 40,
                    child: Icon(
                      Icons.person,
                      size: 45,
                    ),
                  ),
                  const SizedBox(width: 15),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          'John Doe',
                          style: TextStyle(
                            fontSize: 20,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(height: 5),
                        Text(
                          'Flutter Developer',
                        ),
                        SizedBox(height: 5),
                        Text(
                          'Building modern mobile applications.',
                          style: TextStyle(
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 30),
              const Text(
                'Statistics',
                style: TextStyle(
                  fontSize: 22,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 15),
              Row(
                children: [
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(15),
                      decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: const Column(
                        children: [
                          Text(
                            '25',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 25,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            'Projects',
                            style: TextStyle(
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                  const SizedBox(width: 15),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.all(15),
                      decoration: BoxDecoration(
                        color: Colors.green,
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: const Column(
                        children: [
                          Text(
                            '12',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 25,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          Text(
                            'Courses',
                            style: TextStyle(
                              color: Colors.white,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

54. Common Mistakes with Row and Column

Mistake 1: Putting Too Many Fixed-Width Widgets in a Row

This can cause horizontal overflow on smaller screens.

Mistake 2: Forgetting Expanded or Flexible

Long text inside a Row may need Expanded or Flexible so that it receives appropriate constraints.

Mistake 3: Using Expanded Inside an Unbounded Main Axis

Expanded requires remaining finite space along the main axis. Using it inside an unbounded Column or Row can cause layout errors.

Mistake 4: Expecting Row or Column to Scroll

Row and Column are not scrolling widgets. Use ListView or SingleChildScrollView when scrolling is required.

Mistake 5: Using Row When Items Should Wrap

Use Wrap when items need to move to additional lines.

Mistake 6: Excessive Nesting

Deeply nested Row and Column structures can make layouts difficult to maintain. Use reusable widgets where appropriate.

55. Best Practices

• Use Row for horizontal arrangements.
• Use Column for vertical arrangements.
• Understand main axis and cross axis before choosing alignment properties.
• Use MainAxisAlignment for positioning along the primary direction.
• Use CrossAxisAlignment for positioning along the secondary direction.
• Use SizedBox for simple spacing.
• Use Expanded when a child should fill available main-axis space.
• Use Flexible when a child should be flexible without necessarily filling all allocated space.
• Use Wrap when children should move to additional lines.
• Use ListView when content needs to scroll.
• Use SingleChildScrollView for smaller single-child scrollable layouts.
• Use responsive constraints instead of relying on fixed dimensions everywhere.
• Break large layouts into reusable widgets.
• Use const for widgets that do not change.

56. Row and Column in Real-World Applications

57. Interview Questions

Q1. What is Row in Flutter?

Row is a widget that arranges its children horizontally.

Q2. What is Column in Flutter?

Column is a widget that arranges its children vertically.

Q3. What is the main axis of Row?

The main axis of Row is horizontal.

Q4. What is the main axis of Column?

The main axis of Column is vertical.

Q5. What does MainAxisAlignment do?

It controls how children are positioned along the main axis.

Q6. What does CrossAxisAlignment do?

It controls how children are positioned along the cross axis.

Q7. What is the difference between Expanded and Flexible?

Expanded forces its child to fill the allocated main-axis space, while Flexible allows the child to be smaller than the allocated space depending on its fit and constraints.

Q8. Can Row scroll?

No. Row itself does not scroll. Use a scrolling widget such as a horizontal ListView when scrolling is required.

Q9. Can Column scroll?

No. Column itself does not scroll. Use a ListView or SingleChildScrollView when scrolling is required.

Q10. How do you fix Row overflow?

Depending on the layout, use Expanded, Flexible, Wrap, a scrolling widget, or reduce the required child width.

Q11. What is MainAxisSize?

MainAxisSize controls how much space Row or Column occupies along its main axis. The common values are MainAxisSize.max and MainAxisSize.min.

58. Practice Exercises

1. Create a Row containing three icons.
2. Create a Column containing a title, description and button.
3. Create a horizontal navigation bar using Row.
4. Create a login form using Column.
5. Create a profile section using Row and Column.
6. Create two equal-width dashboard cards using Row and Expanded.
7. Create three different flex-sized containers using Expanded.
8. Create a product information section using Row and Column.
9. Create a responsive Row containing an icon, text and button.
10. Create a vertically scrollable Column using SingleChildScrollView.
11. Create a tag layout using Wrap instead of Row.
12. Create a dashboard using nested Row and Column widgets.

59. Quick Revision Table

60. Learning Resources

For structured Flutter training covering widgets, UI design, Row, Column, Container, Stack and other Flutter concepts, visit:

JustAcademy Flutter Training

To register for a Flutter course demo:

Register for Course Demo

According to JustAcademy's current Flutter course curriculum, the Flutter Widgets and UI Design module covers layout widgets including Row, Column, Container and Stack. View Flutter Training Curriculum

For official technical documentation:

Flutter Row API Documentation

Flutter Column API Documentation

Flutter Expanded API Documentation

Flutter Flexible API Documentation

61. Final Summary

Row and Column are essential Flutter layout widgets. Row arranges children horizontally, while Column arranges children vertically. Their alignment and sizing behavior is controlled primarily through MainAxisAlignment, CrossAxisAlignment, MainAxisSize, Expanded, and Flexible.

• Row: Horizontal arrangement.
• Column: Vertical arrangement.
• MainAxisAlignment: Positions children along the main axis.
• CrossAxisAlignment: Positions children along the cross axis.
• MainAxisSize: Controls how much main-axis space is occupied.
• Expanded: Makes a child fill its allocated flex space.
• Flexible: Allows a child to flex without forcing it to fill all allocated space.
• Wrap: Useful when items need to move onto multiple lines.
• ListView: Useful when content needs scrolling.
• SingleChildScrollView: Useful for scrolling a single child such as a Column.

Mastering Row and Column provides the foundation for building more advanced Flutter interfaces such as profile screens, dashboards, forms, product cards, navigation layouts and responsive application screens.