make top image overflow in showModalBottomSheet

Question

I am using showModalBottomSheet to show sheet widget. There i want half image to overflow the sheet and other half inside the sheet.

Here in my code i am trying to overflow the red container in sheet. Could you please recommend me some approach ?

Expected

Actual

showModalBottomSheet(
        context: context,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(20))),
        builder: (BuildContext context) {
          return Stack(
            children: [
              FractionallySizedBox(
                heightFactor: 0.6,
                child:
                    PersonProfile(person),
              ),
              Positioned(
                top: -50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              )
            ],
          );
        },
        isScrollControlled: true,
      );

Answer 1

You are almost there!

Just add clip behaviour in your stack.

Stack(
            clipBehavior: Clip.none,
            children: [
              Positioned(
                top: -50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              )
            ],
          )