Skip to main content
Flutter Basics – Complete Beginner to Advanced Guide
CHAPTER 08 Beginner

Rows, Columns, Containers, and Padding

Updated: May 16, 2026
20 min read

# CHAPTER 8

Rows, Columns, Containers, and Padding

1. Introduction

If you look at any mobile app, the layout is simply a grid. An Instagram feed is a vertical list of posts. Each post has a horizontal list of elements (a profile picture next to a username). To build complex interfaces in Flutter, you combine these vertical and horizontal stacks. In this chapter, we will master Rows, Columns, Containers, and Padding. We will learn how to arrange multiple children, align them perfectly to the center or edges using Axis Alignment, and wrap them in beautifully styled, padded boxes.

2. Learning Objectives

By the end of this chapter, you will be able to:
  • Stack widgets vertically using the Column widget.
  • Stack widgets horizontally using the Row widget.
  • Align items using MainAxisAlignment and CrossAxisAlignment.
  • Apply spacing using the Padding widget.
  • Style UI elements using the Container widget's BoxDecoration.

3. The Column Widget (Vertical Stacking)

A Column takes a list of widgets and stacks them vertically, from top to bottom.
  • Notice it uses children: [] (a Dart List), not child:.
dart
1234567 
Column(
  children: [
    Text("Title"),
    Text("Subtitle"),
    Icon(Icons.star),
  ],
)

4. The Row Widget (Horizontal Stacking)

A Row takes a list of widgets and places them side-by-side, from left to right.
dart
123456 
Row(
  children: [
    Icon(Icons.person),
    Text("Username"),
  ],
)

5. Alignment (Main and Cross Axes)

Rows and Columns don't just stack things; they align them. Every Row and Column has two axes:
  • Main Axis: The direction it flows. (For a Row, Main = Horizontal. For a Column, Main = Vertical).
  • Cross Axis: The opposite direction. (For a Row, Cross = Vertical).

MainAxisAlignment properties:

  • MainAxisAlignment.start: Pushes everything to the top/left.
  • MainAxisAlignment.center: Bunches everything in the dead center.
  • MainAxisAlignment.spaceBetween: Pushes the first item to the far left, the last item to the far right, and spreads the rest evenly in the middle.

dart
1234567 
Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Text("Left Side"),
    Text("Right Side"),
  ],
)

6. The Padding Widget

In CSS, padding is a property. In Flutter, Padding is a Widget. If you want text to not touch the edges of the screen, you wrap it in Padding.
dart
1234 
Padding(
  padding: const EdgeInsets.all(16.0), // Adds 16 pixels of space on all 4 sides!
  child: Text("I have breathing room!"),
)
  • EdgeInsets.all(8): All sides.
  • EdgeInsets.symmetric(horizontal: 16, vertical: 8): Different X and Y values.
  • EdgeInsets.only(top: 20): Only add padding to the top.

7. The Container Styling (BoxDecoration)

The Container is the most versatile widget. However, if you want to add colors, rounded corners, or shadows, you must use the decoration property. CRITICAL RULE: If a Container has a decoration, you MUST put the color: property *inside* the decoration, or Flutter will crash!
dart
1234567891011 
Container(
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue, // Color MUST be inside BoxDecoration here!
    borderRadius: BorderRadius.circular(15), // Rounded corners!
    boxShadow: [
      BoxShadow(color: Colors.black26, blurRadius: 10) // Drop shadow!
    ],
  ),
  child: Text("Beautiful Card", style: TextStyle(color: Colors.white)),
)

8. Visual Learning: The Axis System

txt
123456 
[ COLUMN ]                  [ ROW ]
Main Axis: | (Down)         Main Axis: -> (Right)
Cross Axis: -> (Right)      Cross Axis: | (Down)

[ MainAxisAlignment.spaceEvenly ]
Row: [  (A)     (B)     (C)  ]

9. Best Practices

  • Extracting Containers: A heavily styled Container with shadows, padding, and text can be 20 lines of code. If you have a Row of 3 identical Containers, do not copy-paste that code 3 times. Right-click the Container, select Refactor -> Extract Widget, name it CustomCard, and use it like CustomCard() three times!

10. Common Mistakes

  • Infinite Heights in Columns: A Column tries to take up as much vertical space as possible. If you put a Column inside another Column (or a ListView), Flutter won't know how tall to make the inner Column, and it will crash. You must set mainAxisSize: MainAxisSize.min on the inner Column.

11. Mini Project: Build a User Profile Card

Objective: Combine Rows, Columns, and padded Containers to build a UI card.
  1. 1. Return a Center widget holding a Container.
  1. 2. Give the Container a white background, rounded corners (10px), and a drop shadow using BoxDecoration. Set its width to 300, and padding to 20.
  1. 3. Inside the Container, place a Row.
  1. 4. In the Row, add an Icon(Icons.person, size: 50).
  1. 5. Next to the Icon, add a SizedBox(width: 15) for spacing.
  1. 6. Next to the SizedBox, add a Column.
  1. 7. Inside the Column, add two Text widgets: "John Doe" (bold, size 20) and "Software Engineer" (grey).
  1. 8. Fix the Alignment: Set the Column's crossAxisAlignment to CrossAxisAlignment.start so the text aligns to the left perfectly!

12. Practice Exercises

  1. 1. To spread three buttons evenly across the bottom of the screen inside a Row, which specific MainAxisAlignment property should you use?
  1. 2. Write the syntax to apply exactly 10 pixels of padding to the left and right sides of a widget, but 0 to the top and bottom.

13. MCQs with Answers

Question 1

A developer adds a color: Colors.red property to a Container, and then adds a decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)) to the same Container. What happens when they run the app?

Question 2

In a Column widget, what direction does the MainAxisAlignment control?

14. Interview Questions

  • Q: Contrast MainAxisAlignment and CrossAxisAlignment. How do their directions change depending on whether they are applied to a Row or a Column?
  • Q: Explain the mechanical difference between Padding and Margin when applied to a Container with a colored background.
  • Q: Why is the Padding widget preferred in Flutter over relying on standard CSS-style padding attributes inside every UI element?

15. FAQs

Q: Can I put a Row inside a Row? A: Yes! You can nest Rows and Columns endlessly. However, if your nesting goes 10 levels deep, your code will look like a pyramid and be impossible to read. Extract deeply nested widgets into separate classes.

16. Summary

In Chapter 8, we became UI architects. We learned how to stack elements vertically using Columns and horizontally using Rows. We utilized MainAxisAlignment and CrossAxisAlignment to mathematically position our children perfectly on the screen. Finally, we learned how to give elements breathing room using the Padding widget, and how to design beautiful, shadow-casting UI cards using the Container's BoxDecoration.

17. Next Chapter Recommendation

Our layouts are solid, but we need to populate them with interactive elements. Proceed to Chapter 9: Flutter Text, Buttons, Icons, and Images.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Layouts in Flutter
Next Chapter Flutter Text, Buttons, Icons, and Images

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 5

🎥 Related Videos 1