Skip to main content
The Stac Positioned widget controls where a child of a Stack is positioned. It corresponds to Flutter’s Positioned widget and allows precise positioning using coordinates and optional sizing constraints. Use it with JSON to declare positioned children inside a Stack. To learn more about the Positioned widget in Flutter, see the official documentation.

Positioning constraints

Only two of the three horizontal values (left, right, width) may be set; at least one must be omitted or null. Similarly, only two of the three vertical values (top, bottom, height) may be set; at least one must be omitted or null.

Properties

PropertyTypeDescription
leftdouble?The distance from the left edge of the stack.
topdouble?The distance from the top edge of the stack.
rightdouble?The distance from the right edge of the stack.
bottomdouble?The distance from the bottom edge of the stack.
widthdouble?The width of the positioned child.
heightdouble?The height of the positioned child.
childStacWidgetThe widget to position within the stack.
The Dart API also supports named constructors: StacPositioned.fill(), StacPositioned.fromRect(), StacPositioned.fromRelativeRect(), and StacPositioned.directional(). These are not available in JSON format.

Example

StacPositioned(
  left: 10,
  top: 20,
  right: 30,
  bottom: 40,
  child: StacText(data: 'Hello, World!'),
)

Dart-Only Constructors

The following named constructors are available in Dart but not in JSON:

StacPositioned.fill()

Creates a positioned widget with left, top, right, and bottom defaulting to 0.0, so the child fills the stack unless overridden.
StacPositioned.fill(
  left: 10,
  top: 20,
  right: 30,
  bottom: 40,
  child: StacText(data: 'Fills the stack'),
)

StacPositioned.fromRect()

Creates a positioned widget from a StacRect, setting left, top, width, and height. right and bottom are set to null.
StacPositioned.fromRect(
  rect: StacRect(left: 10, top: 20, width: 100, height: 50),
  child: StacText(data: 'From rect'),
)

StacPositioned.fromRelativeRect()

Creates a positioned widget from relative edges: left, top, right, and bottom are required; width and height are null.
StacPositioned.fromRelativeRect(
  left: 10,
  top: 20,
  right: 30,
  bottom: 40,
  child: StacText(data: 'Relative rect'),
)

StacPositioned.directional()

Creates a positioned widget using start and end instead of left and right. The mapping depends on textDirection: for LTR, startleft and endright; for RTL, the opposite. Only two of start, end, and width may be set; only two of top, bottom, and height may be set.
StacPositioned.directional(
  textDirection: StacTextDirection.ltr,
  start: 10,
  top: 20,
  width: 100,
  height: 50,
  child: StacText(data: 'Directional positioning'),
)