Learn Layout System: Row, Column, Stack

Definition

Layout widgets are Flutter widgets that arrange their child widgets in a specific manner, controlling the position and size of each child within the parent.

When you want to lay out widgets horizontally, use the Row widget. The mainAxisAlignment property controls how the children are spaced along the main axis, which is horizontal for Row. You can align children to the start, end, center, or space them evenly.

main.dart


              1234567891011121314151617
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Hello'),
            Text('World'),
          ],
        ),
      ),
    ),
  ));
}

To arrange widgets vertically, use the Column widget. The crossAxisAlignment property determines how children are aligned across the horizontal axis. For instance, you can align them to the start, end, or center of the column.

main.dart


              123456789101112131415161718192021
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('First'),
            SizedBox(height: 20),
            Text('Second'),
            SizedBox(height: 20),
            Text('Third'),
          ],
        ),
      ),
    ),
  ));
}

If you need to overlap widgets, the Stack widget is the right choice. Stack allows you to place widgets on top of each other and position them using the Positioned widget.

main.dart


              12345678910111213141516171819202122232425
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Stack(
          children: [
            Container(width: 100, height: 100, color: Colors.blue),
            Positioned(
              left: 20,
              top: 20,
              child: Container(width: 60, height: 60, color: Colors.red),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Text('Stacked'),
            ),
          ],
        ),
      ),
    ),
  ));
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you give examples of when to use Row, Column, and Stack in a real app?

How do I choose between Row, Column, and Stack for my layout?

Can you explain more about mainAxisAlignment and crossAxisAlignment?

Swipe to show menu

Definition

Layout widgets are Flutter widgets that arrange their child widgets in a specific manner, controlling the position and size of each child within the parent.

main.dart


              1234567891011121314151617
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            Text('Hello'),
            Text('World'),
          ],
        ),
      ),
    ),
  ));
}

main.dart


              123456789101112131415161718192021
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('First'),
            SizedBox(height: 20),
            Text('Second'),
            SizedBox(height: 20),
            Text('Third'),
          ],
        ),
      ),
    ),
  ));
}

If you need to overlap widgets, the Stack widget is the right choice. Stack allows you to place widgets on top of each other and position them using the Positioned widget.

main.dart


              12345678910111213141516171819202122232425
            
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Stack(
          children: [
            Container(width: 100, height: 100, color: Colors.blue),
            Positioned(
              left: 20,
              top: 20,
              child: Container(width: 60, height: 60, color: Colors.red),
            ),
            Positioned(
              right: 10,
              bottom: 10,
              child: Text('Stacked'),
            ),
          ],
        ),
      ),
    ),
  ));
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 2