flutter: top of image deleted in stack widget - flutter

Question

I am trying to use stack in my widget tree:
body: Center(
child: SingleChildScrollView(
child: Stack(
overflow: Overflow.visible,
children: <Widget>[
Container(
// card view
alignment: Alignment.center,
height: 200,
margin: EdgeInsets.only(
top: 20.0, bottom: 50.0, left: 50.0, right: 50.0),
decoration: BoxDecoration(
color: color_transparent_black,
borderRadius: BorderRadius.circular(14.0),
),
),
Positioned(
top: -60,
left: 0,
right: 0,
bottom: 0,
child: Align(
alignment: Alignment.topCenter,
child: Container(
width: width * 0.3,
height: height * 0.2,
child: CircleAvatar(
backgroundColor: Colors.transparent,
child: Image.asset("assets/images/ic_setting.png"),
),
),
),
),
],
),
),
),
);
And this result is this:
Why top of setting icon has been deleted?

Answer 1

I fixed the problem:
body: Center(
child: SingleChildScrollView(
child: Stack(
// overflow: Overflow.visible,
children: <Widget>[
Container(
// card view
alignment: Alignment.center,
height: 200,
margin: EdgeInsets.only(
top: 80.0, bottom: 50.0, left: 50.0, right: 50.0),
decoration: BoxDecoration(
color: color_transparent_black,
borderRadius: BorderRadius.circular(14.0),
),
),
FractionalTranslation(
translation: Offset(0.0, 0.0),
child: Align(
alignment: Alignment.topCenter,
child: Container(
width: width * 0.3,
height: height * 0.2,
child: CircleAvatar(
backgroundColor: Colors.transparent,
child: Image.asset("assets/images/ic_setting.png"),
),
),
),
),
],
),
),
),
);
and it is result:
I increases Top margin to top: 80.0 and replace Positioned with FractionalTranslation. Actually it works with Positioned too.

Answer 2

Its most likely because you set the top: -60 for the Positioned widget.
Edit 1:
Stop clipping by removing SingleChildScrollView
And you can center all children of Stack using alignment: Alignment.topCenter property of Stack widget itself.
child: Center(
child: Stack(
overflow: Overflow.visible,
alignment: Alignment.topCenter,
children: <Widget>[
Container(
height: 200,
...
),
Positioned(
top: -60,
...
child: Container(
...
),
),
),
]),