Ask any Flutter beginner what frustrated them most in their first month and a huge number will say the same thing: layout. You place two widgets and one shoves the other off the screen. You try to center something and it stretches edge to edge instead. The good news is that Flutter layouts follow a small set of rules, and once those rules click, you stop fighting the screen and start directing it. This guide walks through the handful of widgets and ideas that cover the vast majority of real layouts.
Row and Column: the two workhorses
Almost every Flutter layout is built from two widgets: Row, which arranges its children left to right, and Column, which stacks them top to bottom. If you can picture a screen as boxes sitting in rows and columns, you can already describe most interfaces. They take a list of children and lay them out along their main direction.
Column(
children: [
Text('Title'),
Text('Subtitle'),
ElevatedButton(onPressed: () {}, child: Text('Go')),
],
);That is the entire idea. A Column going down the page, a Row going across it, and the two nested inside each other to build anything more complex.
The part that confuses everyone: main axis and cross axis
Here is where beginners get stuck. Every Row and Column has two directions. The main axis runs in the direction the widget lays out its children, and the cross axis runs at a right angle to it. For a Column, the main axis is vertical and the cross axis is horizontal; for a Row, it is the opposite. You position children along the main axis with mainAxisAlignment and along the cross axis with crossAxisAlignment.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [ ... ],
);The trick that saves hours of confusion is to keep asking yourself which axis is the main one for the widget you are editing. Once you internalize that a Column centers vertically with mainAxisAlignment and a Row centers vertically with crossAxisAlignment, most alignment mysteries vanish.
Expanded and Flexible: sharing the space
What happens when you want one widget to fill the leftover room, like a text field that should take all available width next to a fixed button? You wrap it in Expanded. Expanded tells Flutter to give that child whatever space remains after the fixed-size children are placed. If you have two Expanded children, they split the space evenly; give them flex values and they split it proportionally.
Row(
children: [
Expanded(child: TextField()),
SizedBox(width: 8),
ElevatedButton(onPressed: () {}, child: Text('Send')),
],
);Flexible is the gentler sibling: it lets a child take up to its share of space but not more than it needs. Between Expanded for greedy children and fixed sizes for the rest, you can build layouts that adapt to any screen width.
Padding and SizedBox: room to breathe
Two of the most useful layout widgets do almost nothing, and that is the point. Padding adds space around a widget, which is how you keep content off the edges of the screen and apart from its neighbors. SizedBox creates a fixed empty gap, perfect for putting a precise amount of space between two items in a Row or Column. Beginners often reach for a Container to add spacing, but Padding and SizedBox say exactly what you mean and keep your code readable.
When everything overflows
Sooner or later you will meet the yellow-and-black striped bar, Flutter telling you a widget tried to take more space than it had. With a Column, the usual cause is more content than the screen is tall. You have two clean fixes. If the content should scroll, wrap the Column in a SingleChildScrollView. If it should share the visible space, give the flexible parts Expanded so they shrink to fit.
SingleChildScrollView(
child: Column(children: [ ...lots of content ]),
);Almost every overflow you hit as a beginner is solved by one of those two moves, so when you see the stripes, ask first whether the area should scroll or share.
Nesting to build real screens
Real screens are just Rows and Columns inside one another. A profile card might be a Row with an avatar on the left and, on the right, a Column holding a name above a short bio. A settings page is a Column of Rows, each Row pairing a label with a switch. Once you start seeing interfaces as nested rows and columns, building them becomes a matter of describing what you already see rather than wrestling with mysterious behavior.
Row(
children: [
CircleAvatar(),
SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ Text('Ada Lovelace'), Text('Flutter learner') ],
),
),
],
);Stack: layering widgets on top of each other
Rows and Columns place widgets side by side, but sometimes you need them to overlap, like a label sitting on top of an image or a small badge in the corner of an icon. That is what Stack is for. It places its children on top of one another, and you use Positioned or an alignment to say where each layered child sits. You will not need Stack for most screens, but when you want something to float above something else, it is exactly the right tool, and simply knowing it exists saves you from contorting Rows and Columns to fake the effect.
Center and Align for precise positioning
When you just want a single widget in the middle of the available space, wrap it in Center and you are done; it is far clearer than fiddling with both alignment properties of a parent. For finer control, Align lets you pin a child to a specific spot, such as the bottom-right corner, using an alignment value. These small widgets often replace a confusing pile of alignment settings with a single, readable line, which is exactly the kind of clarity that keeps a growing layout manageable as your screens get more involved.
A workflow that prevents layout pain
Beyond the widgets, a habit makes layout dramatically easier: build in small steps and run often. Add one widget, hot reload, look at the screen, then add the next. When something jumps or overflows, you will know exactly which change caused it instead of staring at a tangle of fifty widgets trying to guess. It also helps to wrap a confusing widget in a temporary colored Container while you are positioning things, so you can literally see the box it occupies, then remove it once the layout looks right.
Putting it all together
Flutter layouts are not really hard; they are just unfamiliar at first. Master Row and Column, get comfortable with main axis versus cross axis, lean on Expanded to share space, use Padding and SizedBox for breathing room, and reach for SingleChildScrollView or Expanded when things overflow. That short list covers most of what you will ever build. For the full menu of layout widgets, the official Flutter layout documentation is a great reference, and if a layout ever behaves in a baffling way, our roundup of common Flutter mistakes beginners make covers the usual culprits. Build small, run often, and the screen will start doing exactly what you tell it.