Misconceptions about the use of GestureDetector in Flutter

In real development, we often need to implement more click events for a component. For example, the native RaisedButton component cannot respond to specific actions such as drag or drop or lift, and has only one onPressed() method to indicate that. When we want to implement these refinement events, the common component we use is GestureDetector. Let’s start with the following code:

GestureDetector(
    onTap: () {
        debugPrint("RaisedButton click block");
    },
    child: RaisedButton(
    child: Text("Click on me and try."),
    onPressed: () {
        debugPrint("I got clicked."); }))Copy the code

What do you think the result of this code, when RaisedButton is clicked, is going to be in the console? Take a look at the following code:

GestureDetector(
	behavior: HitTestBehavior.opaque,
    onTap: () {
        debugPrint("RaisedButton click block");
    },
    child: RaisedButton(
    child: Text("Click on me and try."),
    onPressed: () {
        debugPrint("I got clicked."); }))Copy the code

As with the above question, what does the console output when the RaisedButton is clicked? The answer, invariably, is:

I got clickedCopy the code

As can be seen, the simple use of GestureDetector cannot block the click events of sub-components, even if behavior is added, it cannot do so. Therefore, we conclude that while the child component can respond to the click event, the GestureDetector cannot block the child component from responding to the click event. So what if we want to block the child component’s response to the click event? Instead, use the AbsorbPointer component. Let’s look at the following code:

AbsorbPointer(
    child: RaisedButton(
    child: Text("Click on me and try."),
    onPressed: () {
        debugPrint("I got clicked."); }))Copy the code

Click RaisedButton again and the console will output nothing. So? How to make GestureDetector work on RaisedButton? Simply make RaisedButton an unresponsive click event, and the same goes for other controls. The implementation code is as follows:

GestureDetector(
    behavior: HitTestBehavior.opaque,
    onTap: () {
        debugPrint("RaisedButton click block");
    },
    child: AbsorbPointer(
        child: RaisedButton(
        child: Text("Click on me and try."),
            onPressed: () {
                debugPrint("I got clicked."); })))Copy the code

Click RaisedButton again and the console will output:

RaisedButton click blockCopy the code

Of course, the original button click animation will also be disabled.