Positioned

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

Property	Type	Description
left	`double?`	The distance from the left edge of the stack.
top	`double?`	The distance from the top edge of the stack.
right	`double?`	The distance from the right edge of the stack.
bottom	`double?`	The distance from the bottom edge of the stack.
width	`double?`	The width of the positioned child.
height	`double?`	The height of the positioned child.
child	`StacWidget`	The 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

Dart
JSON
Preview

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

{
  "type": "stack",
  "children": [
    {
      "type": "positioned",
      "left": 10,
      "top": 20,
      "right": 30,
      "bottom": 40,
      "child": {
        "type": "text",
        "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, start → left and end → right; 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'),
)

Layout Widgets

Display Widgets

Interactive Widgets

Data Widgets

Positioning constraints

Properties

Example

Dart-Only Constructors

`StacPositioned.fill()`

`StacPositioned.fromRect()`

`StacPositioned.fromRelativeRect()`

`StacPositioned.directional()`

​Positioning constraints

​Properties

​Example

​Dart-Only Constructors

​StacPositioned.fill()

​StacPositioned.fromRect()

​StacPositioned.fromRelativeRect()

​StacPositioned.directional()

Positioning constraints

Properties

Example

Dart-Only Constructors

`StacPositioned.fill()`

`StacPositioned.fromRect()`

`StacPositioned.fromRelativeRect()`

`StacPositioned.directional()`