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?