canvas with GestureDetector

Making interactive drawings on a canvas in Flutter often involves using CustomPaint. But how do you know where on your drawing the user tapped? That's where GestureDetector comes in handy.

Combining CustomPaint and GestureDetector

You wrap your CustomPaint widget inside a GestureDetector. The GestureDetector handles tap events on the whole area its child covers.

Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () => print("do what you want"), // This will fire when a tap is detected
    child: CustomPaint(
      size: Size.infinite,
      painter: WorldPainter(),
    ),
  );
}

Controlling Tap Detection with hitTest

Sometimes, you only want to react to taps that are close to a specific item you've drawn, like a circle or a character. CustomPainter has a special method called hitTest for this exact purpose.

How hitTest Works

The GestureDetector passes the tap position (an Offset) to the hitTest method of your CustomPainter. If hitTest returns true, the GestureDetector considers it a "hit" on the painter, and its tap callbacks (onTap, onPanDown, etc.) will fire. If hitTest returns false, the tap is ignored by this GestureDetector.

Implementing Radius-Based Detection

Inside your hitTest method, you can write logic to check if the tap position (position) is within a certain distance of the location you care about (this.location).

class WorldPainter extends CustomPainter {
  // ... other painter code ...

  bool hitTest(Offset position) {
    var distance = position.distanceTo(this.location); // Calculate distance from tap to target
    return distance < detectionRadius; // Return true if within the radius
  }

  // ... rest of the painter class ...
}

Example Calculation

This snippet calculates the distance between the tap point (position) and your defined location. It then checks if this distance is less than your detectionRadius. If it is, the method returns true, signalling to the GestureDetector that the tap occurred where you wanted it to.

By implementing hitTest in your CustomPainter, you gain fine-grained control over when and where taps on your canvas trigger reactions.

Save 3 months of work

Create your app using our 6 years of making Flutter apps and more than 50+ apps

Frequently Asked Questions

How do I detect taps on a specific part of my drawing in Flutter?

You can wrap your `CustomPaint` widget with a `GestureDetector` and implement the `hitTest` method in your `CustomPainter`.

What is the purpose of the `hitTest` method in CustomPainter?

The `hitTest` method determines if a given position (like a tap location) should be considered a hit on the custom painting. If it returns true, the `GestureDetector`'s callbacks will fire.

How can I make tap detection on my canvas work only within a circle?

In your `CustomPainter`'s `hitTest` method, calculate the distance from the tap position to the center of your circle. Return `true` only if the distance is less than the circle's radius.

Does the onTap callback in GestureDetector always fire when tapping on a CustomPaint child?

No, if the `CustomPaint`'s painter implements the `hitTest` method, the `onTap` callback will only fire if `hitTest` returns `true` for the tap position.