Flutter's Stack: Layering Widgets on Top of Each Other
Flutter's Stack widget lets you overlap children, like layering papers. The first child is at the bottom, the last is on top. Use it for text over images or gradient overlays. The footgun: you can only position children relative to the stack's edges.
Why it exists
Standard layouts like Row and Column place widgets next to each other, in a single dimension. But user interfaces often need widgets to overlap, like text on an image or a badge on an icon. Stack provides a simple way to control this Z-axis layering.
The mental model
Think of a pile of papers on a desk. The Stack is the desk area. Each widget you add to its children list is a new piece of paper. The first widget in the list is the first paper you put down (at the bottom). The last widget is the last paper you put down (at the top, visible over all others).
How it works
A Stack has a list of children whose order defines their painting sequence from bottom to top. Children are either non-positioned or positioned. Non-positioned children are aligned based on the Stack's alignment property (defaulting to top-start). The Stack sizes itself to be just large enough to contain all its non-positioned children. Positioned children are widgets wrapped in a Positioned widget. They are ignored for sizing and are instead placed relative to the Stack's edges using properties like top, left, bottom, and right.
When to use it
Use Stack for simple overlapping UI. Common cases include: placing a title over a background image, adding a gradient overlay to make text more readable, or showing a notification badge on top of an icon. It's the go-to for simple Z-index control.
When not to use it
Avoid Stack when you need to position children relative to their own size or the Stack's size (e.g., "center this child but offset it by 50% of its own width"). For complex, dynamic layouts where children's positions depend on each other, consider using CustomMultiChildLayout instead.
One canonical example
To create a simple stack of three colored boxes, you would provide three Container widgets as children. A red 100x100 Container first, a green 90x90 Container second, and a blue 80x80 Container third. The result would be the blue box on top, followed by the green, with the red box at the very bottom. By default, they will be aligned to the top-left of the Stack.
Interview question
In a Flutter Stack, if multiple children overlap, what primarily determines which child widget is rendered on top of the others?
- a.The order in which the child widgets are listed in the Stack's children array.Correct
- b.The alignment property of the Stack, which dictates the primary layering axis.
- c.The explicit z-index property assigned to each child.
- d.The size of the child widget, with larger widgets appearing on top.
Why? this is the answer
The card states that the order of children in the list defines their painting sequence from bottom to top, meaning the last child in the list is rendered on top. While z-index is a common concept for layering in other contexts, Flutter's Stack uses list order for this purpose.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles