Stack with Positioned Widgets

Introduction

Flutter provides a wide variety of layout widgets to build responsive and beautiful user interfaces. Among these, the Stack widget is one of the most powerful tools when it comes to creating overlapping elements. Unlike Column or Row, which arrange their children in a vertical or horizontal order, Stack allows widgets to be placed on top of each other.

But the true flexibility of Stack comes when it is combined with the Positioned widget, which gives you absolute control over the placement of child widgets within the Stack. Using Positioned, you can anchor elements to specific parts of the screen or overlay content such as watermarks, labels, floating icons, or banners.

This article will provide a deep dive into how the Stack widget works, how Positioned enhances it, and why mastering these two widgets is crucial for building professional Flutter applications.

What is the Stack Widget?

The Stack widget is a layout widget in Flutter that allows you to place multiple widgets on top of each other. Instead of arranging children in a sequence, the Stack layers them. By default, the first child is at the bottom, and subsequent children are drawn above it.

For example:

Stack(
  children: [
Container(width: 200, height: 200, color: Colors.blue),
Container(width: 150, height: 150, color: Colors.red),
Container(width: 100, height: 100, color: Colors.green),  ],
)

In this example, a blue box forms the base, a red box is layered on top, and a smaller green box sits above everything else.

What is the Positioned Widget?

The Positioned widget is used inside a Stack to give precise control over where a widget appears. While a normal child in a Stack is positioned at the top-left corner by default, the Positioned widget allows you to specify properties like:

top
left
right
bottom

These properties define how far the widget should be placed from the respective edge of the Stack.

Example:

Stack(
  children: [
Container(width: 300, height: 300, color: Colors.grey),
Positioned(
  top: 20,
  left: 20,
  child: Text("Watermark"),
),  ],
)

Here, the word “Watermark” is positioned 20 pixels from the top and 20 pixels from the left inside the Stack.

Relationship Between Stack and Positioned

The Stack is like a canvas, while Positioned acts like a brush stroke telling Flutter exactly where to place each element.

Without Positioned: Children are placed relative to the top-left by default.
With Positioned: You gain pixel-perfect control over placement.

This relationship allows developers to design advanced UI elements that go beyond the limitations of Column and Row.

Properties of Positioned

top

Defines the distance of the widget from the top edge of the Stack.

left

Defines the distance from the left edge.

right

Defines the distance from the right edge.

bottom

Defines the distance from the bottom edge.

width and height

You can also explicitly set the size of a widget using these properties.

For example:

Positioned(
  bottom: 10,
  right: 10,
  width: 100,
  height: 50,
  child: Container(color: Colors.red),
)

This places a red rectangle 10 pixels from the bottom and right of the Stack, with fixed dimensions.

Example: Watermark Over an Image

One of the most common uses of Stack with Positioned is overlaying a watermark on an image.

Stack(
  children: [
Image.network(
  "https://example.com/sample.jpg",
  width: 300,
  height: 200,
  fit: BoxFit.cover,
),
Positioned(
  bottom: 10,
  right: 10,
  child: Text(
    "© MyApp",
    style: TextStyle(
      color: Colors.white,
      fontSize: 16,
      fontWeight: FontWeight.bold,
      backgroundColor: Colors.black54,
    ),
  ),
),  ],
)

Here:

The image forms the background.
The Positioned widget places the watermark at the bottom-right corner.

This approach is widely used in photography, e-commerce, and media apps.

Real-World Use Cases of Stack with Positioned

Watermarks on Images

To protect content or brand assets, developers often add a watermark at a fixed position on images.

Floating Action Elements

Like badges on icons, notification counters, or small labels that overlay a button.

Custom Layouts

Creating unique designs such as overlapping avatars, banners, or special UI effects.

Layered Backgrounds

Adding gradients, shadows, or decorative elements behind or above main content.

Game Development

Stack and Positioned are useful for placing characters, controls, or HUD elements in exact positions.

Comparison with Other Layout Widgets

Stack vs Column

Column arranges widgets vertically.
Stack allows overlap and absolute positioning.

Stack vs Row

Row arranges widgets horizontally.
Stack lets widgets occupy the same space with controlled positions.

Stack vs Align

Align positions a single child relative to its parent.
Positioned within a Stack can manage multiple children with exact placement.

Handling Overflow in Stack

By default, Stack may allow children to overflow outside its boundaries if positioned incorrectly. To control this, use the property:

Stack(
  clipBehavior: Clip.none,
  children: [...]
)

or change it to Clip.hardEdge or Clip.antiAlias to prevent overflow.

Advanced Example: Profile Picture with Status Badge

Stack(
  children: [
CircleAvatar(
  radius: 50,
  backgroundImage: NetworkImage("https://example.com/profile.jpg"),
),
Positioned(
  bottom: 5,
  right: 5,
  child: Container(
    width: 20,
    height: 20,
    decoration: BoxDecoration(
      color: Colors.green,
      shape: BoxShape.circle,
      border: Border.all(color: Colors.white, width: 2),
    ),
  ),
),  ],
)

In this example:

A profile picture is placed in the center.
A small green status indicator (online status) is placed at the bottom-right corner using Positioned.

Best Practices

Use Positioned only when necessary
Do not overuse Positioned. If a simpler widget like Align or Padding can achieve the same effect, use that for cleaner code.
Keep Layouts Responsive
Hardcoding pixel values may not adapt well to different screen sizes. Instead, use MediaQuery or relative positioning.
Avoid Deep Nesting
Too many nested Stacks with Positioned widgets can hurt readability and performance.
Test on Multiple Devices
Ensure your absolute positioning looks good across different screen resolutions.
Combine with Other Widgets
Stack can be combined with Padding, Align, and Container to achieve more flexible designs.

Performance Considerations

The Stack widget is lightweight and efficient, but misuse can lead to issues.

Using too many overlapping layers can increase rendering time.
Over-reliance on absolute positioning may reduce responsiveness.
Use Positioned thoughtfully to avoid unnecessary layout complexity.

Stack with Positioned vs CustomPainter

For more complex and dynamic graphics, sometimes CustomPainter is better. But for UI overlays, Stack with Positioned is usually simpler and more efficient.

Common Mistakes

Forgetting to wrap with a fixed size container
Without constraints, a Stack might grow infinitely, causing layout errors.
Overusing hardcoded pixel values
This can break responsiveness across devices.
Not using clipBehavior properly
Uncontrolled overflow may ruin the design.
Replacing Align with Positioned unnecessarily
Sometimes Align is simpler and easier to maintain.