We will be discussing the Stack Widget and the Positioned Widget because Stack needs Positioned widget to position its children on its vertical and horizontal axis. With the Positioned widget, arranging children inside the Stack becomes easy. Which in return creates beautiful UI.

Introduction

Stack widget stacks its children on top of each other like a stack of books, you can rearrange that stack however you want. You can add color and shape using the Container widget and give a background to the UI and have a Card widget on top of it, there are so many possibilities as per a developer’s imagination.

These are the parameters of a Stack widget.

Stack(
  alignment: Alignment.center,
  textDirection: TextDirection.rtl,
  fit: StackFit.loose,
  overflow: Overflow.visible,
  clipBehavior: Clip.hardEdge,
  children: []
),

And these are the parameters of a Positioned widget.

Positioned(
  height: 0,
  width: 0,
  left: 0,
  right: 0,  
  top: 0,
  bottom: 0,
  child: (),
)

Observe the images above, first one is a normal Stack widget with three containers as its children along with center alignment. The next image is the same but has a Positioned widget inside the Stack wrapping Containers 2 and 3 within. Alignment property and Text Direction property have been discussed in detail in my previous article on Row, Column, and Flex. Other than those two properties, fit and overflow is important for arranging the children inside the Stack.

There are 3 options for the fit property.
1) fit: StackFit.loose,
2) fit: StackFit.expand,
3) fit: StackFit.passthrough,

1) stackFit.loose: Allows the constraint to be loosened by its parent. It basically means that if the parent has a width and height of around 300x600 pixels, Stack will allow all non-positioned children to have a width or a height from zero to 300 and zero to 600 respectively. Pretty much similar to the images above.

2) stackFit.expand: Will tighten the constraints to the biggest size allowed. For example, if the parent's width and height are 100x600 pixels, then all non-positioned children will be forced to have the same width and height. Please refer to the image below.

In the above image Container 1 is not wrapped inside a Positioned widget, whereas Container 2 and 3 are, so when stackFit.expand is used Container 1 expands to the width and the height of the parent.

3) stackFit.passthrough: This property is a little complicated, if you want to see the difference between this property from the other two, you will need to wrap the Stack widget with an Expanded widget inside a Row widget. Since Row places its widgets horizontally, the horizontal constraints will be tight, which means they will pass through and fill the space horizontally, and vertically the constraints will be loose. Check the code and image below to better understand it.

Row(
  children: [
    Expanded(
      child: Stack(
        fit: StackFit.passthrough,
        overflow: Overflow.visible,
        children: [
          Container(
            decoration: BoxDecoration(
              color: Colors.red,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey,
                  blurRadius: 10.0,
                  spreadRadius: 3.0,
                  offset: Offset(10.0, 10.0),
                ),
              ],
            ),
            alignment: Alignment.centerRight,
            width: 200,
            height: 200,
            child: RotatedBox(
              quarterTurns: 1,
              child: Text(
                'Container 1',
                style:
                    TextStyle(fontSize: 18.0, color: Colors.white),
              ),
            ),
          ),

Now let us discuss the important property which you might have already observed in the above image, how container 2 is outside the bounds of the red container.

that is … OverFlow

OverFlow property has 2 options
overflow: Overflow.visible,
overflow: Overflow.clip,

Above images, the red and green container has overFlow.visible, since it is wrapped inside a Positioned widget, we still have to discuss the Positioned widget I know and we will in just a bit, overflow as the name suggests the green container is overflowing outside the bounds of the red container. Now if we use overflow.clip, then the result will be the purple and amber container, the amber container is clipped and sized according to the size of the purple container.

Positioned Widget

Now, the parameters of the Stack widget work well if the children inside the Stack are wrapped with Positioned widget. We have already seen all the parameters of the Positioned widget, let us understand it now and how well it works with the Stack.

The top, bottom, and height properties change the widget's position on the vertical axis, and the left, right, and width properties change the widget's position on the horizontal axis.

tip to Remember: that only two properties can be used at a time from horizontal values and only two from vertical values. You cannot use all the 3 together, you can use any two in any combination. Now another important thing to remember is that the width and height values of the Positioned widget will override the values of the child widget wrapped inside it.

Stack(
  overflow: Overflow.visible,
  children: [
    Container(
      decoration: BoxDecoration(
        color: Colors.red,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 10.0,
            spreadRadius: 3.0,
            offset: Offset(10.0, 10.0),
          ),
        ],
      ),
      alignment: Alignment.centerRight,
      width: 300,
      height: 300,
      child: RotatedBox(
        quarterTurns: 1,
        child: Text(
          'Container 1',
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    ),
    Container(
      decoration: BoxDecoration(
        color: Colors.red,
        boxShadow: [
          BoxShadow(
            color: Colors.grey,
            blurRadius: 10.0,
            spreadRadius: 3.0,
            offset: Offset(10.0, 10.0),
          ),
        ],
      ),
      alignment: Alignment.centerRight,
      width: 300,
      height: 300,
      child: RotatedBox(
        quarterTurns: 1,
        child: Text(
          'Container 1',
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    ),
    Positioned(
      left: -15,
      top: -15,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.green,
          boxShadow: [
            BoxShadow(
              color: Colors.black54,
              blurRadius: 15.0,
              spreadRadius: 3.0,
              offset: Offset(10.0, 10.0),
            ),
          ],
        ),
        alignment: Alignment.bottomCenter,
        width: 250,
        height: 250,
        child: Text(
          'Container 2',
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    ),
    Positioned(
      top: -50,
      right: 30,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.blue,
          boxShadow: [
            BoxShadow(
              color: Colors.black54,
              blurRadius: 10.0,
              spreadRadius: 2.0,
              offset: Offset(5.0, 5.0),
            ),
          ],
        ),
        alignment: Alignment.center,
        width: 200,
        height: 200,
        child: Text(
          'Container 3',
          style: TextStyle(fontSize: 18.0, color: Colors.white),
        ),
      ),
    ),
  ],
),

Please go through the above code along with the above image, I have wrapped the green and blue container inside a Positioned widget and have given different values for its horizontal and vertical values which eventually results in the above image. I think it's cool, giving a bit of a 3D kind of an effect to it. As I said earlier lots can be done using the Stack and Positioned widget for creating great background and UI for flutter applications. You just need to try it out and experiment with it.

Thank you! Hope you enjoyed reading and learned something new.