Summary  
This chapter explains how to use Row, Column, and Stack layout widgets to arrange and align child widgets horizontally, vertically, or in overlapping layers using alignment properties and Positioned.  

General domain of usage  
User interface layout

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.

Definition

Watch this video for a visual demonstration of how Row, Column, and Stack widgets work in Flutter. See how each layout arranges and positions widgets on the screen, and understand the effects of properties like mainAxisAlignment, crossAxisAlignment, and Positioned. This will help you better grasp the differences and best use cases for each layout system.

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.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSB7CiAgcnVuQXBwKE1hdGVyaWFsQXBwKAogICAgaG9tZTogU2NhZmZvbGQoCiAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICBjaGlsZDogUm93KAogICAgICAgICAgbWFpbkF4aXNBbGlnbm1lbnQ6IE1haW5BeGlzQWxpZ25tZW50LnNwYWNlRXZlbmx5LAogICAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgICAgVGV4dCgnSGVsbG8nKSwKICAgICAgICAgICAgVGV4dCgnV29ybGQnKSwKICAgICAgICAgIF0sCiAgICAgICAgKSwKICAgICAgKSwKICAgICksCiAgKSk7Cn0=

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.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSB7CiAgcnVuQXBwKE1hdGVyaWFsQXBwKAogICAgaG9tZTogU2NhZmZvbGQoCiAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICBjaGlsZDogQ29sdW1uKAogICAgICAgICAgY3Jvc3NBeGlzQWxpZ25tZW50OiBDcm9zc0F4aXNBbGlnbm1lbnQuc3RhcnQsCiAgICAgICAgICBtYWluQXhpc0FsaWdubWVudDogTWFpbkF4aXNBbGlnbm1lbnQuc3BhY2VCZXR3ZWVuLAogICAgICAgICAgY2hpbGRyZW46IFsKICAgICAgICAgICAgVGV4dCgnRmlyc3QnKSwKICAgICAgICAgICAgU2l6ZWRCb3goaGVpZ2h0OiAyMCksCiAgICAgICAgICAgIFRleHQoJ1NlY29uZCcpLAogICAgICAgICAgICBTaXplZEJveChoZWlnaHQ6IDIwKSwKICAgICAgICAgICAgVGV4dCgnVGhpcmQnKSwKICAgICAgICAgIF0sCiAgICAgICAgKSwKICAgICAgKSwKICAgICksCiAgKSk7Cn0=

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.

aW1wb3J0ICdwYWNrYWdlOmZsdXR0ZXIvbWF0ZXJpYWwuZGFydCc7Cgp2b2lkIG1haW4oKSB7CiAgcnVuQXBwKE1hdGVyaWFsQXBwKAogICAgaG9tZTogU2NhZmZvbGQoCiAgICAgIGJvZHk6IENlbnRlcigKICAgICAgICBjaGlsZDogU3RhY2soCiAgICAgICAgICBjaGlsZHJlbjogWwogICAgICAgICAgICBDb250YWluZXIod2lkdGg6IDEwMCwgaGVpZ2h0OiAxMDAsIGNvbG9yOiBDb2xvcnMuYmx1ZSksCiAgICAgICAgICAgIFBvc2l0aW9uZWQoCiAgICAgICAgICAgICAgbGVmdDogMjAsCiAgICAgICAgICAgICAgdG9wOiAyMCwKICAgICAgICAgICAgICBjaGlsZDogQ29udGFpbmVyKHdpZHRoOiA2MCwgaGVpZ2h0OiA2MCwgY29sb3I6IENvbG9ycy5yZWQpLAogICAgICAgICAgICApLAogICAgICAgICAgICBQb3NpdGlvbmVkKAogICAgICAgICAgICAgIHJpZ2h0OiAxMCwKICAgICAgICAgICAgICBib3R0b206IDEwLAogICAgICAgICAgICAgIGNoaWxkOiBUZXh0KCdTdGFja2VkJyksCiAgICAgICAgICAgICksCiAgICAgICAgICBdLAogICAgICAgICksCiAgICAgICksCiAgICApLAogICkpOwp9

Which layout widget would you use to overlap widgets in Flutter?

Learn the essential skills to build simple, visually appealing Android and iOS apps using Flutter. This course covers Dart fundamentals, Flutter project structure, UI building blocks, navigation, and theming to help you create robust mobile applications.

Get introduced to Flutter and Dart, their relationship, and the core concepts that power Flutter app development.

Dive into the widget-based architecture of Flutter and understand how the widget tree and build context work.

Master the essential widgets and layout systems for building clean and responsive Flutter UIs.

Implement navigation in your Flutter apps using Navigator, named routes, and data passing techniques.

Layout System: Row, Column, Stack