Flutter Layout Tutorial: Row, Column, Stack, Container and Expanded

❖ Welcome to Param Classes!

In Flutter app development, creating a beautiful user interface is an important skill. Every mobile application contains different elements such as text, images, buttons, icons, cards and forms. To arrange these elements properly on the screen, Flutter provides powerful layout widgets.

In this tutorial, we will learn five important Flutter layout widgets: Row, Column, Stack, Container and Expanded. These widgets help developers organize UI elements horizontally, vertically, inside containers and even on top of each other.

At Param Classes, our goal is to help beginners understand Flutter app development through practical examples. Let's learn these widgets step by step.

✦ 1. What Are Layout Widgets in Flutter?

Layout widgets are used to arrange and position other widgets on the screen.

For example:

• A login screen needs text fields arranged vertically.

• A dashboard may display multiple buttons in rows.

• A profile screen may show a profile image with text.

• A product card may contain an image, title and price.

Flutter uses a widget-based system. This means almost every part of your application is created using widgets.

Some commonly used layout widgets are:

Widget	Purpose
Row	Arranges children horizontally
Column	Arranges children vertically
Stack	Places widgets on top of each other
Container	Adds size, padding, margin, color and decoration
Expanded	Allows a child of Row, Column or Flex to fill available space

✦ 2. Understanding the Row Widget

The Row widget arranges its child widgets horizontally, from left to right.

For example, if you want to display three buttons in a single line, you can use Row.

❖ Row Widget Example

Create a Flutter project and open the lib/main.dart file.

Replace the existing code with:

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 Widget Example'),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(Icons.home, size: 40),
            SizedBox(width: 20),
            Icon(Icons.person, size: 40),
            SizedBox(width: 20),
            Icon(Icons.settings, size: 40),
          ],
        ),
      ),
    );
  }
}

❖ Understanding the Code

• Row() creates a horizontal layout.

• children contains the widgets displayed inside the Row.

• Icon() displays an icon.

• SizedBox(width: 20) adds horizontal space.

• mainAxisAlignment controls how children are positioned along the horizontal direction.

❖ Common MainAxisAlignment Values

• MainAxisAlignment.start

• MainAxisAlignment.center

• MainAxisAlignment.end

• MainAxisAlignment.spaceAround

• MainAxisAlignment.spaceBetween

• MainAxisAlignment.spaceEvenly

Try changing MainAxisAlignment.center to MainAxisAlignment.spaceBetween and observe the difference.

✦ 3. Understanding the Column Widget

The Column widget arranges its child widgets vertically, from top to bottom.

It is useful for login screens, registration forms, profile details and dashboard sections.

❖ Column Widget 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('Column Widget Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'Welcome to Flutter',
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            Icon(Icons.flutter_dash, size: 60),
            SizedBox(height: 20),
            Text('Learn Flutter App Development'),
          ],
        ),
      ),
    );
  }
}

❖ Understanding the Code

• Column() creates a vertical layout.

• mainAxisAlignment controls vertical positioning.

• SizedBox(height: 20) creates vertical spacing.

• Text() displays text on the screen.

Important: A Column can overflow when its children need more vertical space than the screen provides. For long content, consider using SingleChildScrollView or ListView.

✦ 4. Understanding the Container Widget

The Container widget is one of the most commonly used widgets in Flutter. It can provide width, height, padding, margin, background color, alignment and decoration.

For example, you can use Container to create a profile card, information box or colored section.

❖ Container Widget 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('Container Example'),
        ),
        body: Center(
          child: Container(
            width: 250,
            height: 150,
            alignment: Alignment.center,
            padding: const EdgeInsets.all(15),
            margin: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(15),
            ),
            child: const Text(
              'Welcome to Param Classes',
              textAlign: TextAlign.center,
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

❖ Important Container Properties

• width: Sets the container width.

• height: Sets the container height.

• color: Sets a simple background color when not using decoration.

• padding: Adds space inside the container.

• margin: Adds space outside the container.

• alignment: Positions the child widget.

• decoration: Adds styling such as background, border and rounded corners.

• child: Displays a widget inside the container.

Note: When using decoration: BoxDecoration(...), set the background color inside BoxDecoration rather than setting both color and decoration on the same Container.

✦ 5. Understanding the Stack Widget

The Stack widget allows you to place multiple widgets on top of each other.

It is useful for:

• Profile images with online status indicators.

• Text displayed over images.

• Notification badges on icons.

• Custom banners and cards.

❖ Stack Widget 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('Stack Widget Example'),
        ),
        body: Center(
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 250,
                height: 150,
                color: Colors.blue,
              ),
              const Text(
                'Flutter Layout',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const Positioned(
                right: 10,
                top: 10,
                child: Icon(
                  Icons.star,
                  color: Colors.yellow,
                  size: 30,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

❖ Understanding the Code

• Stack() places widgets on top of each other.

• alignment controls the default alignment of its children.

• Positioned() places a child at a specific position inside the Stack.

• right and top define the distance from the right and top edges.

The order of children matters: later children are painted above earlier children.

✦ 6. Understanding the Expanded Widget

The Expanded widget is used inside a Row, Column or Flex. It allows a child to take up the available space along the main axis.

For example, suppose you have two containers inside a Row. You want both containers to share the available width equally. You can use Expanded.

❖ Expanded Widget 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('Expanded Widget Example'),
        ),
        body: Row(
          children: [
            Expanded(
              child: Container(
                height: 120,
                color: Colors.blue,
                alignment: Alignment.center,
                child: const Text(
                  'First Box',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            Expanded(
              child: Container(
                height: 120,
                color: Colors.orange,
                alignment: Alignment.center,
                child: const Text(
                  'Second Box',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

❖ Understanding the Code

• Both containers are wrapped inside Expanded.

• Each Expanded widget receives an equal share of the available horizontal space.

• Both containers automatically adjust their width.

You can also use flex to control the space distribution.

For example:

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

Here, the first container receives twice the available space of the second container.

✦ 7. Difference Between Row, Column, Stack, Container and Expanded

Widget	Main Use
Row	Horizontal arrangement
Column	Vertical arrangement
Stack	Overlapping widgets
Container	Styling and spacing
Expanded	Sharing available space

These widgets can also be combined to create complex user interfaces.

✦ 8. Practical Example: Create a Simple Flutter Profile Card

Now let's combine the layout widgets to create a simple profile card.

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('Profile Card'),
        ),
        body: Center(
          child: Container(
            width: 320,
            padding: const EdgeInsets.all(20),
            margin: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(15),
              boxShadow: const [
                BoxShadow(
                  color: Colors.black12,
                  blurRadius: 10,
                  spreadRadius: 2,
                ),
              ],
            ),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const CircleAvatar(
                  radius: 40,
                  child: Icon(Icons.person, size: 45),
                ),
                const SizedBox(height: 15),
                const Text(
                  'Flutter Developer',
                  style: TextStyle(
                    fontSize: 22,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                const SizedBox(height: 8),
                const Text('Welcome to Param Classes!'),
                const SizedBox(height: 20),
                Row(
                  children: [
                    Expanded(
                      child: ElevatedButton(
                        onPressed: () {},
                        child: const Text('Follow'),
                      ),
                    ),
                    const SizedBox(width: 10),
                    Expanded(
                      child: OutlinedButton(
                        onPressed: () {},
                        child: const Text('Message'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

❖ What Did We Learn from This Project?

• Container creates the card design.

• Column arranges profile details vertically.

• CircleAvatar displays a circular profile icon.

• Row places two buttons horizontally.

• Expanded gives both buttons equal width.

• SizedBox adds spacing between elements.

This small project demonstrates how multiple Flutter layout widgets work together to create a clean user interface.

✦ 9. Tips for Better Flutter Layout Design

1. Use Row when elements need to appear horizontally.

2. Use Column when elements need to appear vertically.

3. Use Container for styling, padding, margin and decoration.

4. Use Stack when widgets need to overlap.

5. Use Expanded when children should share available space.

6. Use SingleChildScrollView or ListView for content that may exceed the screen height.

7. Test your layouts on different screen sizes.

8. Avoid fixed dimensions everywhere when a flexible layout is more suitable.

✦ 10. Practice Tasks for Beginners

Try these exercises after completing the tutorial:

1. Create a Row containing three different icons.

2. Create a Column with a title, subtitle and button.

3. Design a Container with a border and rounded corners.

4. Use Stack to place a notification badge on a profile icon.

5. Create two equal-width buttons using Expanded.

6. Build a simple student profile card using Row, Column and Container.

Practice each example in Android Studio and experiment with different values.

❖ Conclusion

Flutter layout widgets are the foundation of mobile app user interface development. By understanding Row, Column, Stack, Container and Expanded, you can arrange UI elements and create attractive app screens.

In this tutorial, we learned how these widgets work individually and how to combine them in a practical profile card project.

At Param Classes, we encourage beginners to learn Flutter through hands-on practice and real-world examples. Keep practising these layout widgets because they will be useful in almost every Flutter application you build.

Learn Today, Grow Tomorrow with Param Classes!