Flutter Positioned Tutorial with Examples

Positioned
Positioned.directional constructor
Positioned.fill constructor
Positioned.fromRect constructor
Positioned.fromRelativeRect constructor

1. Positioned

No ADS

Positioned widget is used to position a child widget of a Stack.

Flutter Stack

Positioned is only used as a direct (or descendant) child widget of Stack. On the path from Positioned to Stack, it includes only StatelessWidget or StatefulWidget widgets, other widgets are not allowed (eg RenderObjectWidget).

Positioned constructor

const Positioned(
    {Key key,
    double left,
    double top,
    double right,
    double bottom,
    double width,
    double height,
    @required Widget child}
)

Example:

(ex1)

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
           left: 100,
          top: 70,
          child: Container(
            width: 200,
            height: 100,
            color: Colors.green,
          ),
        )
      ],
    )
)

The size of the Positioned and its child are always the same.

Let's look at an example: A Positioned with a non-nulltop and bottom forces the height of the child widget to change to accommodate that constraint.

(ex2)

SizedBox (
    width: double.infinity,
    height: double.infinity,
    child: Stack(
      alignment: Alignment.centerLeft,
      children: <Widget>[
        Positioned (
          top: 100,
          bottom: 70,
          child: Container (
            width: 200,
            height: 30, // !!
            color: Colors.green,
          ),
        )
      ],
    )
)

If all three parameters left, right, width are null then Stack.alignment property will be used to position the child widget horizontally. Likewise, if all three parameters top, bottom and height are null then Stack.alignment property will be used to position the child widget vertically.

2. Positioned.directional constructor

No ADS

Positioned.directional is used to create a Positioned based on text direction.

Positioned.directional constructor

Positioned.directional(
  {Key key,
  @required TextDirection textDirection,
  double start,
  double top,
  double end,
  double bottom,
  double width,
  double height,
  @required Widget child}
)

textDirection parameter is required and not null. It accepts value TextDirection.ltr (Left to Right) or TextDirection.rtl (Right to Left).

If textDirection is TextDirection.ltr, parameters (start, end) will correspond to (left, right). Otherwise (start, end) will correspond to (right, left).

3. Positioned.fill constructor

Positioned.fill is a constructor with parameters left, right, top and bottom have default values 0.

Positioned.fill constructor

const Positioned.fill(
  {Key key,
  double left: 0.0,
  double top: 0.0,
  double right: 0.0,
  double bottom: 0.0,
  @required Widget child}
)

4. Positioned.fromRect constructor

Positioned.fromRect creates a Positioned object with values given by Rect object.

Positioned.fromRect constructor

Positioned.fromRect(
  {Key key,
  Rect rect,
  @required Widget child}
)

Flutter Rect

5. Positioned.fromRelativeRect constructor

Positioned.fromRelativeRect creates a Positioned object with the values given by RelativeRect object.

Positioned.fromRelativeRect constructor

Positioned.fromRelativeRect(
  {Key key,
  RelativeRect rect,
  @required Widget child}
)

Flutter RelativeRect

No ADS

Flutter Positioned Tutorial with Examples

1. Positioned

2. Positioned.directional constructor

3. Positioned.fill constructor

4. Positioned.fromRect constructor

5. Positioned.fromRelativeRect constructor

Flutter Programming Tutorials

Flutter Programming Tutorials

Newest Articles