[Flutter/dart] Make sure that Stack does not break part of the widget

phenomenon

You can use the Stack () widget in flutter to stack another widget on top of one. However, if the upper widget protrudes from the lower widget, the protruding part will be interrupted.

Stack(
  children: [
    CircleAvatar(
      child: Icon(Icons.person),
    ),
    Positioned(
      top: -8,
      left: 20,
      child:
        Icon(
          Icons.brightness_1,
          color: Colors.red,
        )
    )
  ],
)

The upper right is cut off

Solution

Set the overflow property of Stack to Overflow.visible.

With this, the protruding part will be displayed without interruption.

Stack(
  overflow: Overflow.visible,  //←this!
  children: [
    CircleAvatar(
      child: Icon(Icons.person),
    ),
    Positioned(
      top: -8,
      left: 20,
      child:
        Icon(
          Icons.brightness_1,
          color: Colors.red,
        )
    )
  ],
)

The upper right was also displayed