Stack, Positioned and Align

Why layering?

Some designs put things on top of each other: a "3" badge on a cart icon, a discount label on a product photo, a play button over a video thumbnail, a gradient behind text on a banner. Rows and Columns cannot overlap children; Stack can.

Stack(
  children: [
    Image.network('https://example.com/saree.jpg', height: 200, width: double.infinity, fit: BoxFit.cover),
    Positioned(
      top: 8,
      left: 8,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
        color: Colors.red,
        child: const Text('30% OFF', style: TextStyle(color: Colors.white)),
      ),
    ),
    const Positioned(
      bottom: 8,
      right: 8,
      child: Icon(Icons.favorite_border, color: Colors.white),
    ),
  ],
)

How Stack sizes itself

Children of a Stack are either positioned (wrapped in Positioned) or non-positioned. The Stack sizes itself to fit its largest non-positioned child; positioned children are then placed relative to the Stack's edges. The fit property changes how non-positioned children are sized: StackFit.loose (default) lets them be their natural size, StackFit.expand forces them to fill the Stack.

Positioned takes any of top, bottom, left and right (and width or height). Giving both left and right stretches the child between them; giving only top and right pins it to that corner. Positioned must be a direct child of a Stack; anywhere else it causes a ParentDataWidget error, just like Expanded outside a Row or Column.

Keep Stacks small and local, such as one card or one banner. Building a whole screen with Positioned and fixed numbers looks right on one phone and breaks on others, because screen sizes differ.

Positioned versus Align

Stack(
  alignment: Alignment.center,                 // default position for non-positioned children
  children: [
    const Icon(Icons.shopping_cart, size: 36),
    Align(
      alignment: Alignment.topRight,
      child: Container(
        padding: const EdgeInsets.all(4),
        decoration: const BoxDecoration(color: Colors.red, shape: BoxShape.circle),
        child: const Text('3', style: TextStyle(color: Colors.white, fontSize: 10)),
      ),
    ),
  ],
)

Clipping

By default, a Stack clips children that are positioned outside its bounds (clipBehavior: Clip.hardEdge). If you want a badge to stick out beyond the icon's edge, set clipBehavior: Clip.none. Rounded images are usually wrapped in ClipRRect(borderRadius: ...).

Common mistakes

• A Stack with only positioned children has no size reference and may collapse; give it a size (SizedBox) or a non-positioned child.
• Expecting a badge outside the bounds to show: set clipBehavior: Clip.none.
• Using Stack for things a Row or Column can do: overlapping layouts are harder to make responsive.
• Forgetting that later children are drawn on top: order matters.