How to Use the Flutter Positioned Widget?

Use the Flutter Positioned Widget

Flutter Positioned Widget is a widget that comes built in with the Flutter SDK. It’s a way of placing arbitrary widgets on top of each other.

This is the standard method to position child widgets inside a Stack widget, or similar.

As the children of a Stack widget are created, you may need to control where each child should be placed.

For that purpose, you could use a ” Positioned ” widget to wrap the children in a Stack widget.

Below are examples of how to use the widget. In this tutorial, I will discuss the Flutter Positioned widget.

Flutter Positioned Widget

Let’s see the construction of the Flutter Positioned Widget:

A positioned widget must stay inside the Stack widget.

StatelessWidget and StatefulWidget cannot be children of Positioned widgets.

Other kinds of widgets such as RenderObjectWidget aren’t allowed.

Positioned widget contains a few properties that affect the size and position of child widgets.

There are five properties that you can use to adjust the size and position of your widget: left, top, right, bottom, and width. height is not among them.

The first four properties are used to set the position of the child relative to the edge.

For example, the left property is used to set the position relative to the left edge.

The last two properties, width, and height are used to set the child widget’s width and height respectively.

You can create a Positioned widget by calling any of its constructors.

The Positioned class has some constructors, such as named and factory constructors.

The argument constructors allow you to set the properties above.

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

So we have to put the value of this constructor.

      body: Container(
        width: 400,
        height: 400,
        decoration: BoxDecoration(border: Border.all()),
        child: Stack(
          children: [
            //Flutter Positioned widgets here
            Positioned(
              top: 40,
              bottom: 40,
              left: 70,
              right: 10,
              child: Container(
                width: 1,
                height: 1,
                color: Colors.blue,
              ),
            )
          ],
        ),
      ),

Output:

Flutter Positioned Widget

Positiond.directional:

If you’re using Positioned.directional, then you’re using it exactly the same way as you would use the constructor.

There’s a lot to know about the difference between the left and right arguments, but that’s the gist of it.

You can pass the textDirection as a String, String object, or textDirection property of an Element.

You must specify a ltr value when the start and end are both provided.

The start value is the value that will be assigned to the left property, while the end value is the value that will be assigned to the right property.

The factory constructor limits you to set at most two out of three horizontal and vertical values.

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

So we will put the value:

      body: Container(
        width: 400,
        height: 400,
        decoration: BoxDecoration(border: Border.all()),
        child: Stack(
          children: [
            // Positioned widgets here
            Positioned.directional(
              textDirection: TextDirection.rtl,
              end: 20,
              top: 20,
              start: 50,
              bottom: 15,
              child: Container(width: 50, height: 100, color: Colors.green),
            ),          ],
        ),
      ),

Output:

Positioned.directional

Flutter Positioned.fill:

It will fill the full position of the box from the values. You can set the value top,left, right, and bottom properties. The default value is 0.0 if you don’t pass anything.

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

So we will put the value:

   // Positioned widgets here
          Positioned.fill(
          left: 20,
          top: 20,
          right: 20,
          bottom: 20,
          child: Container(width: 50, height: 100, color: Colors.red),
        ),

Output:

position fill

Positioned.fromRect Flutter:

Named constructors are used to create a Positioned object based on the given Rect.

We can use the left, right, top, and bottom properties to control the size of the element.

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

Put the code:

            Positioned.fromRect(
              rect: Rect.fromCenter(center: Offset(100, 100), width: 150, height: 150),
              child: Container(width: 50, height: 100, color: Colors.amber),
            ),

Output:

flutter position rect

There are different kinds of Positioned Parameters in Flutter:

  1. Positioned – Parameters
  2. Positioned.directional – Parameters
  3. Positioned.fill – Parameters
  4. Positioned.fromRect – Parameters
  5. Positioned.fromRelativeRect – Parameters

If you have any question about Flutter Positioned Widget then please, leave a comment.

Read More:

Align Text to the Right Android & Vertical Align TextView Without Programmatically