Positioned Widget and Attributes

Introduction:

Crafting precise and customized layouts in Flutter often requires more than the standard widgets. Enter the Positioned widget, a powerful tool for precise positioning within a Stack. In this blog post, we'll explore the intricacies of the Positioned widget, its attributes, and how it enables developers to achieve pixel-perfect layouts in their Flutter applications.

What is Positioned Widget?

The Positioned widget in Flutter is specifically designed for use within a Stack. It allows developers to precisely position a child widget within the stack using top, right, bottom, and left offsets.

Attributes of Positioned:

top: The distance from the top edge of the Stack to the top edge of the child widget.
```
 top: 50,
```
right: The distance from the right edge of the Stack to the right edge of the child widget.
```
 right: 20,
```
bottom: The distance from the bottom edge of the Stack to the bottom edge of the child widget.
```
 bottom: 30,
```
left: The distance from the left edge of the Stack to the left edge of the child widget.
```
 left: 10,
```
width and height: The explicit width and height of the child widget.
```
 width: 100,
 height: 100,
```

Example Usage:

Let's create a simple example where we use the Positioned widget to precisely position a container within a Stack.

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.blue,
    ),
    Positioned(
      top: 50,
      left: 20,
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
)

In this example, a Stack contains two containers, and the Positioned widget is used to place the red container 50 pixels from the top and 20 pixels from the left within the Stack.

Positioned Widget and Attributes

Did you find this article valuable?