Stack is a layout widget that allows you to place widgets on top of each other. Unlike Row or Column, Stack positions its children in layers, making it useful for overlays, badges, floating buttons, and custom UI compositions.
Each child can either be:
- non-positioned (aligned by the
Stack) - positioned using the
Positioned widget
Why does Stack matter in Flutter app development?
Stack enables UI patterns that are impossible with linear layouts:
- Notification badges
- Loading overlays
- Floating labels or icons
- Image overlays and gradients
Without Stack, these layouts would require complex custom painting.
How does Stack work?
Stack lays out its children in two categories:
- Non-positioned children
These define the size of the Stack and are aligned using the alignment property. - Positioned children
These are placed using top, left, right, and bottom values and do not affect Stack's size.
Example:
Stack(
alignment: Alignment.center,
children: [
Container(width: 100, height: 100, color: Colors.blue),
Text('Hello', style: TextStyle(color: Colors.white)),
],
);
Common use cases (example)
Notification badge (important detail!)
By default, Stack clips its children. To allow elements to overflow (like badges), you must disable clipping.
Stack(
clipBehavior: Clip.none,
children: [
Icon(Icons.shopping_cart),
Positioned(
top: -6,
right: -6,
child: CircleAvatar(
radius: 8,
child: Text('3', style: TextStyle(fontSize: 10)),
),
),
],
);
Common mistakes
1. Elements disappearing (clipBehavior)
If a Positioned widget goes outside Stack bounds, it will be clipped unless you set:
2. "My button doesn't work" (tap blocking)
Stack(
children: [
PageContent(),
IgnorePointer(
ignoring: true,
child: Container(color: Colors.transparent),
),
],
);
Use IgnorePointer or AbsorbPointer to control interaction.
3. Using Positioned outside Stack
Positioned only works as a direct child of Stack. Using it in Column or Row will fail.
4. Stack inside Column with only Positioned children
If Stack has no non-positioned children, it may collapse to size 0x0 and disappear.
When to use Stack?
Stack is particularly useful when your UI requires overlapping elements or layered visual composition. Typical scenarios include building badges, floating action elements, overlays, or custom tooltips, where elements must appear above one another rather than following the usual linear flow of a Column or Row. Stack also works well for complex visual layouts, such as cards with positioned icons, layered backgrounds, or decorative effects, where precise control over positioning is necessary.
Using Stack allows you to position children relative to the edges of the parent or other widgets using the Positioned widget, which can simplify certain designs that would otherwise require multiple nested Rows, Columns, or Align widgets. It also enables flexible, dynamic layouts, for instance placing a button partially over an image or combining widgets in z-order layers.
When not to use Stack?
Stack is not recommended for layouts that can be achieved with simple linear arrangements, such as vertical or horizontal lists, because overusing Stack can make your code harder to read and maintain. Avoid using Stack for long scrollable lists, where ListView or Slivers are more appropriate and optimized for performance.
Additionally, if your UI relies heavily on multiple Positioned children for every element, maintaining the layout can become cumbersome, especially when the design changes. In such cases, using Row, Column, or Flex often provides a more maintainable and declarative approach. Stack should be reserved for scenarios where layering and overlapping are genuinely necessary, rather than as a default layout tool.
Alternatives
Depending on the problem:
Column / Row – linear layoutsAlign – simple positioning without layersSliverStack (packages) – stacking inside scrollable slivers
