Flutter- Positioned

The Positioned widget is used to position the child widgets of the Stack.

• Flutter Stack

Positioned is only available as a direct (or descendant) child of Stack. On the Positioned path to the Stack, it only contains StatelessWidget or StatefulWidget widgets, no other widgets (such as RenderObjectWidget) are allowed.

The constructor of Positioned is as follows − 

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

Dart

Sample code:

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,
          ),
        )
      ],
    )
)

Dart

Positioned and its children are always the same size. Run the sample code above to get the following results:

Here's another example: Positioned with a non-null top and bottom forces the child widget's height to change to fit that constraint.

Sample code:

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,
          ),
        )
      ],
    )
)

Dart

Run the sample code above to get the following results:

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

2. Positioned.directional constructor

Positioned.directionalThe constructor is used to create text-based orientation  Positioned.

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}
)

Dart

The textDirection parameter is required and not null. It accepts the value TextDirection.ltr (left to right) or TextDirection.rtl (right to left).
If textDirection is TextDirection.ltr, the 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 whose parameters: left, right, top and bottom have default values ​​of 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}
)

Dart

4. Positioned.fromRect constructor

Positioned.fromRect creates a Positioned object with the given values ​​from the Rect object.

Positioned.fromRect constructor − 

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

Dart

5. Positioned.fromRelativeRect constructor

The Positioned.fromRelativeRect constructor code is as follows - 

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

//More please read: https://www.yiibai.com/flutter/flutter-positioned.html