Flutter - Using Positioned Widget Examples

This tutorial shows you how to use Positioned widgets in Flutter.

While creating the children of a Stack widget, you may need to control where each child should be placed. For that purpose, you can use a widget called Positioned to wrap some of the children. Positioned is a widget used to position a child of a Stack widget. Below are the examples of how to use the widget.

This tutorial doesn't explain about Stack widget in detail. You can read our tutorial about Stack if you want to learn about it.

Using `Positioned`

A Positioned widget must be a descendant of a Stack widget. In addition, the path between the Positioned widget and its enclosing Stack widget can only contain StatelessWidget and StatefulWidget. Other kinds of widgets such as RenderObjectWidget are not allowed.

There are some properties of Positioned widget that determine the position and the dimension of the child widget. Those properties are left, top, right, bottom, width, and height. The first four properties are used to set the position of the child relative from the respective edge. For example, the left property is used to set the position relative from the left edge. The last two properties, width and height, are used to set the child widget's width and the height respectively.

You can create an instance of Positioned widget by calling one of the constructors. The Positioned class has some constructors including named and factory constructors. The constructors have arguments that can be used to set the properties above.

For simplicity, the Stack widget in each example only has one child. In addition, the Stack widget is wrapped in a Container widget with dimensions of 200 x 200 and a border on all sides, so that you can see the boundaries of the box.

  Container(
    width: 200,
    height: 200,
    decoration: BoxDecoration(
      border: Border.all(),
    ),
    child: Stack(
      children: [
        // Put the Positioned widgets here
      ]
    ),
  )

Using `Positioned` Constructor

The default constructor allows you to define the values for the properties above. The properties can be divided into horizontal values (left, right, and width) and vertical values (top, bottom, and height). You are only allowed to set at most two out of the three horizontal values. It makes sense because Flutter won't be able to determine the position and the size if you define all the three horizontal values. The same also applies for the vertical values. You'll getan assertion error if you violate that rule.

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

In the example below, the width and height arguments are not passed. The values will be calculated by Flutter based on the other properties.

  Stack(
    children: [
      Positioned(
        top: 50,
        bottom: 80,
        left: 50,
        right: 20,
        child: Container(width: 1, height: 1, color: Colors.red),
      ),
    ],
  )

Output:

Flutter - Positioned

Even though the child's Container has its own size constraints, it turns out that Flutter applies the width and height calculated by the Positioned widget.

Using `Positioned.directional` Constructor

Using Positioned.directional is very similar to using the constructor. The difference is the left and right arguments are replaced with start and end arguments. To specify which one is the start edge (left or right), you are required to pass a TextDirection value as the textDirection argument. If you set the value to ltr, the value passed as the start argument will be used for the left property, while the value passed as the end argument will be used for the right property. If you set the value to rtl, the value passed as the start argument will be used for the right property, while the value passed as the end argument will be used for the left property. The rule that limits you to set at most two out of three horizontal values and vertical values also applies for this factory constructor.

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

Example:

  Stack(
    children: [
      Positioned.directional(
        textDirection: TextDirection.rtl,
        end: 15,
        top: 15,
        start: 50,
        bottom: 15,
        child: Container(width: 50, height: 100, color: Colors.purple),
      ),
    ],
  )

Output:

Flutter - Positioned - directional

Using `Positioned.fill` Constructor

This named argument can be used to create a Positioned object where you can set the values for the left, top, right, and bottom properties. The default value for each of those properties is 0.0 if you do not pass it.

  const Positioned.fill({
    Key? key,
    double? left = 0.0,
    double? top = 0.0,
    double? right = 0.0,
    double? bottom = 0.0,
    required Widget child,
  }

Example:

  Stack(
    children: [
      Positioned.fill(
        left: 15,
        top: 15,
        right: 15,
        bottom: 15,
        child: Container(width: 50, height: 100, color: Colors.green),
      ),
    ],
  )

Output:

Flutter - Positioned - fill

Using `Positioned.fromRect` Constructor

This named constructor can be used to create a Positioned object based on the given Rect. The left, top, right, and bottom values are obtained from the Rect, while the height and width properties are set to null.

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

  Stack(
    children: [
      Positioned.fromRect(
        rect: Rect.fromCenter(center: Offset(100, 100), width: 150, height: 150),
        child: Container(width: 50, height: 100, color: Colors.orange),
      ),
    ],
  )

Output:

Flutter - Positioned - fromRect

Using `Positioned.fromRelativeRect` Constructor

It's similar to fromRect, but it obtains the left, top, right, and bottom values from the RelativeRect. The height and width properties are set to null as well.

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

  Stack(
    children: [
      Positioned.fromRelativeRect(
        rect: RelativeRect.fromLTRB(15, 15, 50, 100),
        child: Container(width: 50, height: 100, color: Colors.blue),
      ),
    ],
  )

Output:

Flutter - Positioned - fromRelativeRect