Flutter On Press Problem with Negative Y offset Positioned in a Stack - flutter

Question

I have two widgets in a stack. Which is demonstrated below.
The second widget is a button and it is located in a positioned widget which has a negative Y axis.
The problem is overflowed are is not clickable. I there any way to fix this issue?
Stack(
fit: StackFit.expand,
overflow: Overflow.visible,
clipBehavior: Clip.none,
alignment: AlignmentDirectional.topCenter,
children: [
ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(29)),
child: ClipPath(
clipper: NavbarClipper(),
child: Container(
color: Colors.white,
),
),
),
Positioned(
top: -30,
child: Container(
width: context.dynamicHeight(0.16),
height: context.dynamicWidth(0.16),
child: FittedBox(
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.orange,
child: Icon(Icons.ac_unit),
),
),
),
)
],
)
Thanks.

Answer 1

You can wrap rect with padding instead of negative margin to button
class MyHomePage extends StatefulWidget {
MyHomePage();
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Color color = Colors.orange;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 200,
padding: EdgeInsets.all(32),
child: Stack(
fit: StackFit.expand,
clipBehavior: Clip.none,
alignment: AlignmentDirectional.topCenter,
children: [
Padding(
padding: EdgeInsets.only(top: 30),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(20)),
child: ClipRRect(
child: Container(
color: Colors.blue,
)
),
),
),
Positioned(
top: 0,
child: Container(
width: 50,
height: 50,
child: FittedBox(
child: FloatingActionButton(
onPressed: () {
setState((){
color = (color == Colors.red) ? Colors.orange : Colors.red;
});
},
backgroundColor: color,
child: Icon(Icons.ac_unit),
),
),
),
)
],
),
),
);
}
}