two widgets on top of each other

Question

I want to put another widget on the top corner of a container, and I want to put it slightly out of the container as in the picture below.

Answer 1

Use Stack widget and set its clipBehavior to none:

Stack(
    clipBehavior: Clip.none, // <--- important part
    children: [
      Container(
        width: 200,
        height: 100,
        color: Colors.blue,
      ),
      Positioned(
        right: -10,
        top: -10,
        child: Container(
          width: 50,
          height: 20,
          color: Colors.green,
        ),
      ),
    ],
  ),