Creating Horizontal and Vertical Layouts – Detailed Notes

In Flutter, creating horizontal and vertical layouts is one of the most important skills for building structured and responsive user interfaces. Flutter primarily uses widgets such as Row for horizontal layouts and Column for vertical layouts. These widgets can be combined with Container, Expanded, Flexible, SizedBox, Padding, Center, and other widgets to create complete application screens.

Flutter's official curriculum and JustAcademy's Flutter training include layout widgets such as Row, Column, Container, and Stack as part of Flutter UI design. Learn more about Flutter Training at JustAcademy.

1. What Is a Layout in Flutter?

A layout determines how widgets are positioned, sized, aligned, and spaced on the screen. Flutter uses a widget-based layout system where parent widgets control the position and size of their child widgets.

For example:

• Row – Arranges widgets horizontally.
• Column – Arranges widgets vertically.
• Stack – Places widgets on top of each other.
• Expanded – Makes a child occupy available space.
• Flexible – Allows a child to use flexible space.
• SizedBox – Creates fixed spacing or dimensions.
• Padding – Adds space around a widget.
• Container – Provides styling, sizing, padding, margin, and decoration.

2. Horizontal Layout Using Row

The Row widget displays its children horizontally from left to right by default.

Basic Syntax

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

Simple Example

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

The widgets appear next to each other horizontally.

Complete 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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Horizontal Layout"),
        ),
        body: Row(
          children: [
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

3. Vertical Layout Using Column

The Column widget arranges its children vertically.

Basic Syntax

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

Simple Example

Column(
  children: [
    Text("Name"),
    Text("Email"),
    Text("Phone"),
  ],
)

Complete 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(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Vertical Layout"),
        ),
        body: Column(
          children: [
            Container(
              width: 200,
              height: 80,
              color: Colors.red,
            ),
            Container(
              width: 200,
              height: 80,
              color: Colors.green,
            ),
            Container(
              width: 200,
              height: 80,
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

4. Row vs Column

5. Main Axis and Cross Axis

Understanding the main axis and cross axis is essential when working with Row and Column.

Row

• Main axis = Horizontal
• Cross axis = Vertical

Column

• Main axis = Vertical
• Cross axis = Horizontal

For example, in a Row, MainAxisAlignment controls horizontal positioning, while CrossAxisAlignment controls vertical positioning.

6. MainAxisAlignment

MainAxisAlignment controls how children are positioned along the main axis.

Common Values

• start – Places children at the beginning.
• end – Places children at the end.
• center – Places children in the center.
• spaceBetween – Places equal space between children.
• spaceAround – Places space around children.
• spaceEvenly – Places equal space between and around children.

Example

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

Column Example

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Text("Welcome"),
    Text("Flutter Developer"),
    ElevatedButton(
      onPressed: () {},
      child: Text("Continue"),
    ),
  ],
)

7. CrossAxisAlignment

CrossAxisAlignment controls how children are positioned across the cross axis.

• start
• end
• center
• stretch
• baseline

Example

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text("First Name"),
    Text("Last Name"),
    Text("Email"),
  ],
)

8. MainAxisSize

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

MainAxisSize.max

This is the default behavior. The Row or Column tries to occupy the maximum available space.

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

MainAxisSize.min

The layout takes only the amount of space required by its children.

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

9. Creating Spacing with SizedBox

SizedBox is commonly used to create fixed horizontal or vertical spacing.

Vertical Spacing

Column(
  children: [
    Text("Name"),
    SizedBox(height: 20),
    Text("Email"),
  ],
)

Horizontal Spacing

Row(
  children: [
    Icon(Icons.home),
    SizedBox(width: 10),
    Text("Home"),
  ],
)

10. Horizontal Menu Example

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    TextButton(
      onPressed: () {},
      child: Text("Home"),
    ),
    TextButton(
      onPressed: () {},
      child: Text("About"),
    ),
    TextButton(
      onPressed: () {},
      child: Text("Services"),
    ),
    TextButton(
      onPressed: () {},
      child: Text("Contact"),
    ),
  ],
)

This type of Row can be used for simple navigation menus and toolbar sections.

11. Vertical Form Layout

Column is commonly used to create login, registration, search, and profile forms.

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    TextField(
      decoration: InputDecoration(
        labelText: "Email",
        border: OutlineInputBorder(),
      ),
    ),
    SizedBox(height: 16),
    TextField(
      obscureText: true,
      decoration: InputDecoration(
        labelText: "Password",
        border: OutlineInputBorder(),
      ),
    ),
    SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {},
      child: Text("Login"),
    ),
  ],
)

12. Combining Row and Column

Real-world Flutter screens commonly combine Row and Column together.

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

Here, the Column creates the vertical structure while each Row creates a horizontal information section.

13. Nested Row and Column Layout

Nested layouts are useful for building cards, dashboards, profile sections, and product interfaces.

Column(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Product Name",
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 5),
            Text("₹999"),
          ],
        ),
        Icon(Icons.shopping_cart),
      ],
    ),
  ],
)

14. Using Expanded with Row

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

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

The available horizontal space is divided between the two Expanded widgets.

15. Expanded with Flex Values

You can control how available space is distributed by using the flex property.

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

Here, the second container receives approximately twice the available flexible space compared with the first container.

16. Expanded with Column

Expanded can also distribute vertical space inside a Column.

Column(
  children: [
    Expanded(
      child: Container(
        color: Colors.orange,
      ),
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
)

17. Using Flexible

Flexible provides flexibility to a child without requiring it to fill all of its allocated space.

Row(
  children: [
    Flexible(
      child: Text(
        "This is a long text that can adapt to the available width.",
      ),
    ),
    Icon(Icons.info),
  ],
)

Flexible is particularly useful when content may have variable length.

18. Creating a Profile Layout

Column(
  children: [
    CircleAvatar(
      radius: 50,
      child: Icon(Icons.person, size: 50),
    ),
    SizedBox(height: 16),
    Text(
      "John Doe",
      style: TextStyle(
        fontSize: 22,
        fontWeight: FontWeight.bold,
      ),
    ),
    SizedBox(height: 8),
    Text("Flutter Developer"),
    SizedBox(height: 20),
    Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(Icons.email),
        SizedBox(width: 8),
        Text("[email protected]"),
      ],
    ),
  ],
)

19. Creating a Product Card

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.grey),
    borderRadius: BorderRadius.circular(12),
  ),
  child: Row(
    children: [
      Container(
        width: 80,
        height: 80,
        color: Colors.grey.shade300,
        child: Icon(Icons.image),
      ),
      SizedBox(width: 16),
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "Flutter Course",
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 6),
            Text("Learn Flutter from basics to advanced."),
            SizedBox(height: 8),
            Text(
              "₹9,999",
              style: TextStyle(
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)

20. Creating a Dashboard Layout

Column(
  children: [
    Row(
      children: [
        Expanded(
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Column(
                children: [
                  Icon(Icons.people),
                  SizedBox(height: 8),
                  Text("Users"),
                  Text("1,250"),
                ],
              ),
            ),
          ),
        ),
        Expanded(
          child: Card(
            child: Padding(
              padding: EdgeInsets.all(16),
              child: Column(
                children: [
                  Icon(Icons.shopping_cart),
                  SizedBox(height: 8),
                  Text("Orders"),
                  Text("540"),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
  ],
)

21. Row and Column with Center

Use Center when the complete Row or Column should be positioned in the center of its available area.

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.check_circle, size: 60),
      SizedBox(height: 16),
      Text("Payment Successful"),
    ],
  ),
)

22. Row and Column with Padding

Padding is useful for creating space between the screen edge and the layout.

Padding(
  padding: EdgeInsets.all(20),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Text("Welcome"),
      SizedBox(height: 10),
      Text("Start building your Flutter application."),
    ],
  ),
)

23. Handling Row Overflow

A Row does not automatically wrap or scroll its children. If the combined width of its children is greater than the available width, an overflow can occur.

Problem

Row(
  children: [
    Text("This is a very long text that may not fit"),
    Text("Another long text"),
  ],
)

Solution Using Expanded

Row(
  children: [
    Expanded(
      child: Text(
        "This is a very long text that can use available space.",
      ),
    ),
    Icon(Icons.arrow_forward),
  ],
)

Solution Using Flexible

Row(
  children: [
    Flexible(
      child: Text(
        "This text can shrink according to the available width.",
      ),
    ),
    Icon(Icons.arrow_forward),
  ],
)

24. Handling Column Overflow

A Column can overflow vertically when its children require more height than the available screen space.

For content that needs scrolling, use a scrolling widget such as SingleChildScrollView or ListView.

SingleChildScrollView(
  child: Column(
    children: [
      Text("Section 1"),
      SizedBox(height: 400),
      Text("Section 2"),
      SizedBox(height: 400),
      Text("Section 3"),
    ],
  ),
)

25. Row Inside Column

A common application structure is a Column containing multiple Rows.

Column(
  children: [
    Row(
      children: [
        Icon(Icons.person),
        SizedBox(width: 10),
        Text("Profile"),
      ],
    ),
    SizedBox(height: 20),
    Row(
      children: [
        Icon(Icons.settings),
        SizedBox(width: 10),
        Text("Settings"),
      ],
    ),
    SizedBox(height: 20),
    Row(
      children: [
        Icon(Icons.logout),
        SizedBox(width: 10),
        Text("Logout"),
      ],
    ),
  ],
)

26. Column Inside Row

A Row can contain Columns when a horizontal section has multiple vertical content groups.

Row(
  children: [
    Icon(Icons.person, size: 50),
    SizedBox(width: 16),
    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          "John Doe",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        Text("Flutter Developer"),
      ],
    ),
  ],
)

27. Practical Login Screen Layout

Scaffold(
  body: SafeArea(
    child: Padding(
      padding: EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Icon(
            Icons.lock,
            size: 70,
          ),
          SizedBox(height: 20),
          Text(
            "Login",
            textAlign: TextAlign.center,
            style: TextStyle(
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 30),
          TextField(
            decoration: InputDecoration(
              labelText: "Email",
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 16),
          TextField(
            obscureText: true,
            decoration: InputDecoration(
              labelText: "Password",
              border: OutlineInputBorder(),
            ),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {},
            child: Text("Login"),
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text("Don't have an account?"),
              TextButton(
                onPressed: () {},
                child: Text("Register"),
              ),
            ],
          ),
        ],
      ),
    ),
  ),
)

28. Practical App Bar Layout

Row(
  children: [
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.menu),
    ),
    Expanded(
      child: Text(
        "My Flutter App",
        style: TextStyle(
          fontSize: 20,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    IconButton(
      onPressed: () {},
      icon: Icon(Icons.notifications),
    ),
  ],
)

Expanded allows the title area to use the remaining horizontal space between the two buttons.

29. Creating Equal Width Items

Expanded is useful for creating equally sized sections.

Row(
  children: [
    Expanded(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Text("Home"),
      ),
    ),
    Expanded(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Text("Search"),
      ),
    ),
    Expanded(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Text("Profile"),
      ),
    ),
  ],
)

30. Row with Icons and Labels

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.home),
        Text("Home"),
      ],
    ),
    Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.search),
        Text("Search"),
      ],
    ),
    Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.person),
        Text("Profile"),
      ],
    ),
  ],
)

This pattern can be used to create simple bottom-navigation-style interfaces.

31. Row and Column with Alignment

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Container(
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text("Full Width Section"),
    ),
    SizedBox(height: 20),
    Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text("Left"),
        Text("Right"),
      ],
    ),
  ],
)

32. Difference Between SizedBox and Expanded

33. Row, Column and Responsive Design

Row and Column are fundamental to responsive Flutter UI design. However, a fixed Row may not fit on every screen size. For adaptive layouts, developers can combine Row and Column with Expanded, Flexible, Wrap, MediaQuery, LayoutBuilder, and scrolling widgets.

Example

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 600) {
      return Row(
        children: [
          Expanded(child: Text("Left Section")),
          Expanded(child: Text("Right Section")),
        ],
      );
    }

    return Column(
      children: [
        Text("Left Section"),
        Text("Right Section"),
      ],
    );
  },
)

34. Row vs Wrap

Wrap Example

Wrap(
  spacing: 10,
  runSpacing: 10,
  children: [
    Chip(label: Text("Flutter")),
    Chip(label: Text("Dart")),
    Chip(label: Text("Firebase")),
    Chip(label: Text("API")),
    Chip(label: Text("UI Design")),
  ],
)

35. Common Mistakes

Mistake 1: Putting Too Many Widgets in a Row

A Row may overflow if its children require more width than available.

Solution: Use Expanded, Flexible, Wrap, or horizontal scrolling when appropriate.

Mistake 2: Putting Too Much Content in a Column

A Column can overflow vertically.

Solution: Use SingleChildScrollView or ListView when the content needs scrolling.

Mistake 3: Incorrect MainAxisAlignment

Remember that MainAxisAlignment works along the main direction of Row or Column.

Mistake 4: Incorrect CrossAxisAlignment

CrossAxisAlignment works perpendicular to the main axis.

Mistake 5: Using Expanded in an Unbounded Direction

Expanded needs a finite amount of available space along its main axis. Using it in an unbounded scrolling direction can cause layout errors.

36. Best Practices

• Use Row for horizontal arrangements.
• Use Column for vertical arrangements.
• Use Expanded when children should share available space.
• Use Flexible when content should adapt without being forced to fill all allocated space.
• Use SizedBox for simple fixed spacing.
• Use Padding for consistent internal spacing.
• Use Wrap when items need to move onto multiple lines.
• Use ListView for long, scrollable lists.
• Use SingleChildScrollView for smaller single-child scrollable layouts.
• Avoid excessive nesting when a simpler layout can achieve the same result.
• Test layouts on different screen sizes.
• Use responsive techniques for tablets and larger displays.

37. Real-World Applications of Row and Column

• Login and registration forms
• Profile pages
• Product cards
• E-commerce screens
• Dashboard layouts
• Settings screens
• Navigation bars
• Toolbar layouts
• Chat interfaces
• Payment screens
• Shopping cart interfaces
• Mobile application home screens

38. Practice Exercise

Exercise 1 – Horizontal Menu

Create a Row containing Home, About, Services, and Contact buttons.

Exercise 2 – Vertical Profile

Create a Column containing a profile image, username, email, phone number, and Edit Profile button.

Exercise 3 – Product Card

Create a horizontal product card containing an image on the left and product details on the right.

Exercise 4 – Dashboard

Create two rows of dashboard cards using Row, Column, and Expanded.

Exercise 5 – Responsive Layout

Create a layout that uses Row on larger screens and Column on smaller screens.

39. Interview Questions

1. What is the difference between Row and Column in Flutter?
2. What is the main axis of a Row?
3. What is the main axis of a Column?
4. What is CrossAxisAlignment?
5. What is MainAxisAlignment?
6. What is MainAxisSize?
7. When should you use Expanded?
8. What is the difference between Expanded and Flexible?
9. How can you prevent Row overflow?
10. How can you handle Column overflow?
11. What is the purpose of SizedBox?
12. When should you use Wrap instead of Row?
13. How can Row and Column be nested?
14. Why can Expanded cause an error inside a scrolling widget?
15. How can Row and Column be used to create responsive layouts?

40. Quick Revision

41. Learning Resources

For additional Flutter training information and practical learning resources, visit the JustAcademy Flutter Training Course.

To explore course demo registration, visit the JustAcademy Course Demo Registration page.

42. Summary

Creating horizontal and vertical layouts is a fundamental part of Flutter UI development. The Row widget is used for horizontal arrangements, while the Column widget is used for vertical arrangements. By combining Row and Column with MainAxisAlignment, CrossAxisAlignment, MainAxisSize, Expanded, Flexible, SizedBox, Padding, Wrap, and scrolling widgets, developers can create structured and responsive interfaces.

These layout concepts form an important part of Flutter's widget-based UI design and are included in the Flutter UI Design section of the JustAcademy Flutter Training curriculum.