Stack is useful when you want to overlap multiple children in a single screen. Each member of a Stack widget is either positioned or non-positioned.

i) Positioned Widget:

A child of Stack wrapped with Positioned Widget that has at least one non-null property. It works with a combination of parameters - vertical (top, bottom, height) and horizontal (left, right and width) to position the widgets within the Stack. If not positioned widget, Align Widget is used to position the member of Stack.

ii) Non-positioned Widget:

If Stack's member is not wrapped with Align or Positioned Widget, then it is considered a Non-positioned widget. Non-positioned widgets end up on the screen based on Stack's alignment property. By default, the top left corner on the screen.

                    Stack(
  alignment: Alignment.topLeft,
  children: <Widget>[
    Positioned(
      top: 100,
      left: 100,
      child: Container(
        height: 300,
        width: 300,
        child: Center(child: Text('Positioned')),
        color: Colors.orange,
      ),
    ),
    Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: 300,
        width: 300,
        child: Center(child: Text('Aligned')),
        color: Colors.red,
      ),
    ),
    Container(
      height: 100,
      width: 100,
      child: Center(child: Text('Non-Positioned')),
        color: Colors.blue,
    ),
  ],
)

return Stack(
  children: [
    Container (...), // yellow Container
    Align (
      alignment: Alignment.bottomCenter,
      child: Container (...), // green Container
   ),
  ],  
);

Flutter Position Widget in Stack : 3 Ways

1. Using Align Widget in Flutter

2.Using Positioned Flutter Widget

3. Using Stack’s Alignment Property

1. Using Align Widget in Flutter

You can use the Align widget, to align a particular widget in a specific position. If you use the Align widget, your child widget will not follow the Stack’s alignment and then you can place the widget anywhere on the screen using the Align’s alignment property.

Stack(
  children: [
    Align(
      alignment: AlignmentDirectional.topEnd, // <-- SEE HERE
      child: Container(
        width: 300,
        height: 300,
        color: Colors.redAccent,
      ),
    ),
    Container(
      width: 250,
      height: 250,
      color: Colors.amberAccent,
    ),
    Container(
      width: 230,
      height: 230,
      color: Colors.deepPurpleAccent,
    ),
  ],
)

output

2. Using Positioned Flutter Widget

Using the Positioned Flutter widget, you can place a widget at a custom position such as 10 pixels from left and 15 pixels from the top, instead of just topLeft, bottomCenter.

Stack(
  children: [
    Align(
      alignment: AlignmentDirectional.topEnd,
      child: Container(
        width: 300,
        height: 300,
        color: Colors.redAccent,
      ),
    ),
    Container(
      width: 250,
      height: 250,
      color: Colors.amberAccent,
    ),
    Positioned( //<-- SEE HERE
      right: 0,
      top: 15,
      child: Container(
        width: 230,
        height: 230,
        color: Colors.deepPurpleAccent,
      ),
    ),
  ],
)

output

3. Using Stack’s Alignment Property

To position the widget in the Stack, simply add the alignment property and give it the alignment of your choice

Stack(
  alignment: AlignmentDirectional.center,
  children: [
    Container(
      width: 300,
      height: 300,
      color: Colors.redAccent,
    ),
    Container(
      width: 250,
      height: 250,
      color: Colors.amberAccent,
    ),
    Container(
      width: 230,
      height: 230,
      color: Colors.deepPurpleAccent,
    ),
  ],
)

output

1. Positioned is used to position a child widget relative to a specific location within the parent widget. You need to provide the left, right, top, and bottom parameters to specify the position. Positioned can also be used to specify the width and height of the child widget.

2. Align, on the other hand, is used to align a child widget within its parent widget, using the alignment parameter. The alignment parameter can take values such as topLeft, center, bottomRight, etc. Align can also be used to specify the width and height of the child widget.