Align Widget inside Stack occupies full screen

Question

I am using align to position widgets inside my stack. When I am using align in any of my child inside the stack then the stack occupies full screen. Otherwise the stack is of the height of the child that is tallest. I am confused here. Isn't align used to align children inside the stack?

Here is my code:

   bottomNavigationBar: Stack(
    children: <Widget>[
      Container(
        color: Colors.greenAccent,
        width: double.infinity,
        height: 45,
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: Container(
         width: 80,
         height: 80,
          decoration: BoxDecoration(color: Colors.deepPurpleAccent, shape: BoxShape.circle),
          child: IconButton(icon: Icon(Icons.search), onPressed: (){}),
        ),
      )

    ],
  )

Now when I remove the Align widget from my second child the stack is as big as its children.

Answer 1

No problem there. It should occupy all the screen.

Stack size defined by non-positioned children. If you use Align, Stack has no limit, it will expand.

If you want relation between widgets, you must use Positioned widget instead.

https://api.flutter.dev/flutter/widgets/Stack-class.html

From docs:

The stack sizes itself to contain all the non-positioned children, which are positioned according to alignment (which defaults to the top-left corner in left-to-right environments and the top-right corner in right-to-left environments).

Also,

The positioned children are then placed relative to the stack according to their top, right, bottom, and left properties.

Yes it will confuse for a while, even experienced devs may confuse sometimes when working with Stack. It's one of the hardest widgets to grasp fully.