Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[enhancement] Better hit detection #22

Open
hm21 opened this issue Jan 4, 2024 · 0 comments
Open

[enhancement] Better hit detection #22

hm21 opened this issue Jan 4, 2024 · 0 comments
Labels
enhancement New feature or request

Comments

@hm21
Copy link

hm21 commented Jan 4, 2024

Is your feature request related to a problem? Please describe.
The hit area of the widget is currently suboptimal. The problem occurs when there is text with multiple blank lines in between. In this situation, the widget will continue to respond to hit events even if the user taps in those blank spaces. In the image below, you can see the region that is mistakenly identified as a hit target colored green. In my opinion, the widget should only detect a hit event when the user taps on the text with the background, which is below colored in amber.
Screenshot 2024-01-04 122145

Describe the solution you'd like
We should override the hitTest method of the CustomPainter inside the RoundedBackgroundTextPainter class. Below is a simple example of how to do this.

@override
  bool? hitTest(Offset position) {
    // Retrieve the line information
    final lineInfos = computeLines(text);

    // Check each line
    for (final lineInfo in lineInfos) {
      for (final info in lineInfo) {
        // Construct the rounded rectangle for this line
        final rRect = RRect.fromLTRBR(
          info.x,
          info.y,
          info.fullWidth,
          info.fullHeight,
          Radius.circular(info.outerRadius(outerRadius)),
        );

        // Check if the position is within this rectangle
        if (rRect.contains(position)) {
          onHitTestResult(true); // Call method with the result for external handling
          return true;
        }
      }
    }

    // If the position was not within any line's bounding box
    onHitTestResult(false); // Call method with the result for external handling
    return false;
  }

This example is simple and will not perfectly detect any inner rounding. It will also not detect the surrounding padding.
Maybe you have a better solution, but I think for most cases this simple hit detection will be enough. For me it will also be useful if it always calls a method like onHitTestResult which returns if the hitTest is true or false. This is helpful for applications that have more complex logic with many layers. So in the end the widget will look like this then.

RoundedBackgroundText(
  'Text',
  onHitTestResult: (hit) {
   /// Handle hit
  },
  backgroundColor: Colors.amber,
),
@bdlukaa bdlukaa added the enhancement New feature or request label Jan 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants