touch area in overlay widget seems incorrect on iOS - ios

Question

I am currently making a music player, and I made PiP mode widget.
the position of the widget appears to be in the right place,
but when I actually tab buttons they don't work properly.
the clickable area is like down half of the widget.
just like the image above, those 3 buttons only work when I tab the area in the red square.
and the code looks like this:
class AudioTitleOverlayWidget extends StatefulWidget {
final Function onClear;
final Widget widget;
const AudioTitleOverlayWidget(
{Key? key, required this.onClear, required this.widget})
: super(key: key);
#override
_AudioTitleOverlayWidgetState createState() =>
_AudioTitleOverlayWidgetState();
}
class _AudioTitleOverlayWidgetState extends State<AudioTitleOverlayWidget> {
late double width;
late double oldWidth;
late double oldHeight;
late double height;
bool isInPipMode = false;
Offset offset = const Offset(0, 500);
_onExitPipMode() {
Future.microtask(() {
setState(() {
isInPipMode = false;
width = oldWidth;
height = oldHeight;
offset = const Offset(0, 0);
});
});
Future.delayed(const Duration(milliseconds: 250), () {
Get.find<OverlayHandler>().disablePip();
});
}
_onPipMode() {
Future.delayed(const Duration(milliseconds: 100), () {
setState(() {
isInPipMode = true;
width = oldWidth;
height = Constants.VIDEO_TITLE_HEIGHT_PIP - 6.0;
// height = 20;
// offset = Offset(0, oldHeight - height - Constants.BOTTOM_PADDING_PIP);
offset = Offset(0, height * 7.55);
});
});
}
#override
Widget build(BuildContext context) {
final bottomPadding = MediaQuery.of(context).padding.bottom;
oldWidth = width = Get.width;
oldHeight = height = Get.height;
final overlayController = Get.put(OverlayHandler());
final hasBottomTab = overlayController.hasBottomTab;
return GetBuilder<OverlayHandler>(builder: (context) {
if (Get.find<OverlayHandler>().inPipMode != isInPipMode) {
isInPipMode = Get.find<OverlayHandler>().inPipMode;
if (isInPipMode) {
_onPipMode();
} else {
_onExitPipMode();
}
}
if(Get.currentRoute == '/home'){
overlayController.hasBottomTab.value = true;
} else{
overlayController.hasBottomTab.value = false;
}
return Obx(()=>Positioned(
// duration: const Duration(milliseconds: 200),
// curve: Curves.fastOutSlowIn,
left:
Get.isBottomSheetOpen == true
? 10000 //final bottomPadding = MediaQuery.of(context).padding.bottom;
: offset.dx,
top: (isInPipMode == true && hasBottomTab.value == false)
? Get.height - 80 - bottomPadding
: (isInPipMode == true && hasBottomTab.value == true)
? Get.height - 160 - bottomPadding
: (isInPipMode == false && hasBottomTab.value == true)
? bottomPadding
: bottomPadding,
bottom: (isInPipMode == true && hasBottomTab.value == false)
? bottomPadding
: (isInPipMode == true && hasBottomTab.value == true)
? 80 + bottomPadding
: (isInPipMode == false && hasBottomTab.value == true)
? bottomPadding
: bottomPadding,
child: SizedBox(
height: height,
width: width,
child: widget.widget, // the code of the widget is below:
),
));
});
}
}
and the code of the overlay widget in Pip mode:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
backgroundColor: const Color(0xff1c1c1e),
body: GetBuilder<OverlayHandler>(
builder: (getContext) {
// return audioPlayer.playerState(
// builder: (context, realtimePlayingInfos) {
if (!Get.find<OverlayHandler>().inPipMode != true) {
return Stack(
children: [
Positioned(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {Get.find<OverlayHandler>().disablePip();},
child: Column(
children: [
Container(
width: Get.width,
height: 80,
.......
)
]
)
)
)
.....
I have tried in several devices, and on android they don't seem to have this issue,
and iphone with home button also don't seem to have this issue.
iphones without home button(iphone x ~) seem to have this issue.
anyone knows about this? any idea how to handle this?

Answer 1

this part was the issue:
the audioPlayer widget returns Scaffold for both PiP widget and the full screen player widget. I have low understanding level of Flutter widgets but returning Scaffold for PiP player was the reason.
the code should be like this:
#override
Widget build(BuildContext context) {
return
!Get.find<OverlayHandler>().inPipMode
? Scaffold(
.... // full screen player
: Stack(
.... // PiP player, not returning Scaffold