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,
    ),
  ],
)