Skip to content

Instantly share code, notes, and snippets.

@rydmike
Last active April 9, 2020 16:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rydmike/ea5c2d38d03642bf1ad9cf70893828e0 to your computer and use it in GitHub Desktop.
Save rydmike/ea5c2d38d03642bf1ad9cf70893828e0 to your computer and use it in GitHub Desktop.
Gesture detector issue/question: How to block pan events from being received by parent detector/listner? See https://github.com/flutter/flutter/issues/50776
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gesture Issue',
home: Scaffold(body: Center(child: GestureIssue())),
);
}
}
class GestureIssue extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print("onTap pink!");
},
onPanDown: (_) {
print('onPanDown pink!');
},
child: Container(
width: 250,
height: 250,
color: Colors.pink[100],
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text('Tap me!'),
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
print("onTap blue!");
},
onPanDown: (_) {
print("onPanDown blue!");
},
child: Container(
width: 100,
height: 100,
color: Colors.blue[300],
child: Center(child: Text('Tap me!')),
),
),
],
),
),
),
);
}
}
@rydmike
Copy link
Author

rydmike commented Apr 9, 2020

Made this Gist in relation to this flutter issue/question:
flutter/flutter#50776

As I had noticed the same issue and was wondering, maybe this is not the way to do this in Flutter?
If it is not, then in this case how do we prevent pan events from also being received and detected by the "Pink" container?

Use case scenario (my actual case):
Consider a packaged custom widget that uses onPanStart, OnPanDown, OnPanUpdate for interaction. If such a widget is on a scrolling surface, how do we block the pan events from being forwarded from such a widget to whatever parent is in charge of detecting scrolling events?

When the user interacts with such a custom widget with its own gesture detection handling, it most likely needs block all gestures to parent(s) and hence also scroll events to parent(s). The actual widget in my use case works fine as long as it is not on a scrolling surface. It also works on web/desktop as soon as the surface is large enough that there is no need for scrolling, even if it scrolls when it is smaller, eg if everything is wrapped in a singleChildScrollView. In such a case as soon as the widget is on a scrolling surface it becomes impossible/difficult to interact with. If the scrolling of the parent is in the vertical direction, you can get around the issue by panning horizontally to catch the events only in the widget in question, but there is constantly ambiguous events fired to the parent scroll controller.

Imo the:

behavior: HitTestBehavior.opaque,

on the child does not work as expected or I have just misunderstood how it is supposed to work. Maybe there is some other way to accomplish the mentioned task in question, but I have not found it yet, despite researching the topic quite a bit.

I did my test on master, v1.18.1-pre.11 too, it can be seen there too, but the result is the same on current online version of Dartpad.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment