How do you use the Positioned widget in Flutter?

Overview

The

Positioned

Stack

Basic Usage

dartCopy
Stack(
  children: [
    Container(width: 300, height: 200, color: Colors.grey[300]),

    Positioned(
      top: 10,
      left: 10,
      child: Text('Top Left'),
    ),

    Positioned(
      bottom: 10,
      right: 10,
      child: Text('Bottom Right'),
    ),
  ],
)

All Properties

dartCopy
Positioned(
  top: 10,      // Distance from top edge
  bottom: 10,   // Distance from bottom edge
  left: 10,     // Distance from left edge
  right: 10,    // Distance from right edge
  width: 100,   // Explicit width (use instead of left+right)
  height: 50,   // Explicit height (use instead of top+bottom)
  child: Widget(),
)

⚠️ You cannot set both

textCopy

left

+

textCopy

right

AND

textCopy

width

simultaneously. Same for

textCopy

top

+

textCopy

bottom

and

textCopy

height

.

Fill Entire Stack

dartCopy
Stack(
  children: [
    Positioned.fill(
      child: Image.network(url, fit: BoxFit.cover), // Background
    ),
    Positioned(
      bottom: 0, left: 0, right: 0,
      child: Container(
        color: Colors.black54,
        padding: EdgeInsets.all(8),
        child: Text('Caption', style: TextStyle(color: Colors.white)),
      ),
    ),
  ],
)

Practical: Badge on Icon

dartCopy
Stack(
  clipBehavior: Clip.none,
  children: [
    Icon(Icons.notifications, size: 30),
    Positioned(
      top: -4,
      right: -4,
      child: Container(
        padding: EdgeInsets.all(4),
        decoration: BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: Text('3', style: TextStyle(color: Colors.white, fontSize: 10)),
      ),
    ),
  ],
)

Positioned vs Align

Positioned

Align

Alignment.center

dartCopy
// Align — fractional positioning
Stack(
  children: [
    Align(alignment: Alignment.bottomRight, child: FloatingActionButton(...)),
  ],
)

Key Rule:

textCopy

Positioned

only works as a direct child of

textCopy

Stack

. Outside a Stack it has no effect.