Flutter: How to keep gesture events state after opening a simple dialog - dart

Question

I have a grid of Images and I want to open a simple dialog when I long press an Image and to be closed automatically when my finger no longer contacts with the screen (like Instagram quick image preview).
I attached LongPress event to all the images and it works fine so a dialog opens up when I long press an image however when I put my finger up nothing happens even though I attached events like onTapUp, onLongPressEnd, onPointerUp Because of the new opened dialog, All of those events are lost and no longer fires up.
I tried to add the pointer up events to the opened dialog instead but there is a catch, I must tap and release again in order to make it work because Flutter unable to recognize that my finger is already in contact with screen and the opened dialog caused flutter to forget about this fact.

Answer 1

You can insert an OverlayEntry into the Overlay stack by using Overlay.of(context).insert(overlayEntry).
In this overlay, you can catch gestures when required and take actions accordingly. As overlays always sit on top of anything else, the dialog will not cancel your long press gesture and you will be able to respond to longPressEnd.
You will only need to calculate which image has been pressed or use the Offset's provided by onTapDown and the position of the images.
To get the global position of your images, you can assign GlobalKey's to your images and get their global positions in the following way:
final RenderBox renderBox = globalKey.currentContext.findRenderObject() as RenderBox;
final Offset position = renderBox.localToGlobal(Offset.zero);
final Size size = renderBox.size;
To get the position of your long press, you will need to store the position of onTapDown:
onTapDown: (details) => position = details.globalPosition
Now you have everything you need to figure out which bounds the long press happened in.

Answer 2

I found a way to make it work. It can be done with Overlay Widget.
In the widget with GestureDetector, when onLongPress is called, create an OverlayEntry object with your dialog, and insert it into Overlay.
When onLongPressEnd is called, call the remove function of OverlayEntry object.
// Implement a function to create OverlayEntry
OverlayEntry getMyOverlayEntry({
#required BuildContext context,
SomeData someData,
}) {
return OverlayEntry(
builder: (context) {
return AlertDialog(child: SomeWidgetAgain());
}
);
}
// In the widget where you want to support long press feature
OverlayEntry myOverayEntry;
GestureDetector(
onLongPress: () {
myOverayEntry = getMyOverlayEntry(context: context, someData: someData);
Overlay.of(context).insert(myOverayEntry);
},
onLongPressEnd: (details) => myOverayEntry?.remove(),
child: SomeWidgerHere(),
)
Here's the gist on Github:
https://gist.github.com/plateaukao/79aa39854dc4eabf1220bdfa9a0334b6

Answer 3

You can use AnimatedContainer and put a GestureDetector inside.
change width and height using setState and it's done.
Center(
child: AnimatedContainer(
width: containerWidth,
height: containerHeight,
color: Colors.red,
duration: Duration(seconds: 1),
child: GestureDetector(
onLongPress: (){
print("Long Press");
setState(() {
containerWidth = 200;
containerHeight = 200;
});
},
onLongPressUp: (){
print("On Long Press UP");
setState(() {
containerWidth = 100;
containerHeight = 100;
});
},
),
),
)