GestureRecognizer on TextSpan takes up all remaining spaces of a line instead just over the TextSpan

[huntrist]

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      margin: EdgeInsets.all(100),
      child: RichText(
        softWrap: true,
        text: TextSpan(
          children: <InlineSpan>[
            TextSpan(
              text: "very_long_starting_text",
              style: TextStyle(
                color: Colors.red,
              )
            ),
            TextSpan(
              text: "                                         ",
              style: TextStyle(
                color: Colors.green,
                decoration: TextDecoration.lineThrough,
                decorationThickness: 2,
              )
            ),
            TextSpan(
              text: "trailing_text",
              style: TextStyle(
                color: Colors.yellow,
              ),
              recognizer: TapGestureRecognizer()
              ..onTap = () {
                //distinguish between real external link & jiki link
                print("clicked!");
              },
            )
          ],
        )
      ),
    );
  }
}

produces the following effect

when click on the area after the yelllow "trailing_text"
"clicked!" is printed

flutter doctor -v

[√] Flutter (Channel stable, v1.9.1+hotfix.5, on Microsoft Windows [Version 10.0.18362.418], locale zh-CN)
    • Flutter version 1.9.1+hotfix.5 at D:\Env\flutter
    • Framework revision 1aedbb1835 (7 days ago), 2019-10-17 08:37:27 -0700
    • Engine revision b863200c37
    • Dart version 2.5.0

 
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at D:\Env\Android\SDK
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.2
    • ANDROID_HOME = D:\Env\Android\SDK
    • Java binary at: D:\Executable\Android\AndroidStudio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Android Studio (version 3.5)
    • Android Studio at D:\Executable\Android\AndroidStudio
    • Flutter plugin version 40.1.2
    • Dart plugin version 191.8423
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Connected device (1 available)
    • Android SDK built for x86 • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)

[jason-simmons]

This happens because ParagraphTxt::GetGlyphPositionAtCoordinate in the engine returns (last_position, upstream) for a coordinate beyond the end of the last text span.

TextSpan.getSpanForPositionVisitor then decides that the (last_position, upstream) TextPosition falls within the last text span.

This makes sense for positioning the caret in an editable text widget, but will be imprecise for hit testing the last span in non-editable text.

[pedromassangocode]

I was able to reproduce this on latest master channel. The area bellow the trailing_text is also clickable.

sample code

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: Body(),
  ));
}
class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      margin: EdgeInsets.all(100),
      child: RichText(
          softWrap: true,
          text: TextSpan(
            children: <InlineSpan>[
              TextSpan(
                  text: "very_long_starting_text",
                  style: TextStyle(
                    color: Colors.red,
                  )
              ),
              TextSpan(
                  text: "                                         ",
                  style: TextStyle(
                    color: Colors.green,
                    decoration: TextDecoration.lineThrough,
                    decorationThickness: 2,
                  )
              ),
              TextSpan(
                text: "trailing_text",
                style: TextStyle(
                  color: Colors.yellow,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    //distinguish between real external link & jiki link
                    print("clicked!");
                  },
              )
            ],
          )
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel master, 1.22.0-2.0.pre.59, on Mac OS X 10.15.6 19G2021,
    locale en)
    • Flutter version 1.22.0-2.0.pre.59 at
      /Users/pedromassango/dev/SDKs/flutter_master
    • Framework revision be7c7faee6 (8 hours ago), 2020-08-24 22:31:02 -0400
    • Engine revision 8107b36c7b
    • Dart version 2.10.0 (build 2.10.0-56.0.dev)

 
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/pedromassango/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6222593)

[✓] IntelliJ IDEA Community Edition (version 2020.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 48.1.4
    • Dart plugin version 202.6397.47

[!] VS Code (version 1.48.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (4 available)
    • sdk gphone x86 (mobile) • emulator-5554 • android-x86    • Android 11 (API
      30) (emulator)
    • macOS (desktop)         • macos         • darwin-x64     • Mac OS X
      10.15.6 19G2021
    • Web Server (web)        • web-server    • web-javascript • Flutter Tools
    • Chrome (web)            • chrome        • web-javascript • Google Chrome
      84.0.4147.135

! Doctor found issues in 3 categories.

[CaiWanFeng]

I was able to reproduce this on latest master channel. The area bellow the trailing_text is also clickable.

sample code
flutter doctor -v

Did you find any solution? @ianloic @anaisbetts @sgraham @gmoothart @sethladd

[CaiWanFeng]

Appending a spacing TextSpan can fix this issue:

TextSpan(
    text: 'your text',
),
TextSpan(
    // just append an spacing text
    text: ' ',
),

[danagbemava-nc]

Still reproduces on the latest versions of flutter.

recording

Screen.Recording.2022-12-01.at.11.14.56.mov

updated sample

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    title: 'Navigation Basics',
    home: Body(),
  ));
}
class Body extends StatelessWidget {
  const Body({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
      margin: const EdgeInsets.all(100),
      child: RichText(
          softWrap: true,
          text: TextSpan(
            children: <InlineSpan>[
              const TextSpan(
                  text: "very_long_starting_text",
                  style: TextStyle(
                    color: Colors.red,
                  )
              ),
              const TextSpan(
                  text: "                                         ",
                  style: TextStyle(
                    color: Colors.green,
                    decoration: TextDecoration.lineThrough,
                    decorationThickness: 2,
                  )
              ),
              TextSpan(
                text: "trailing_text",
                style: const TextStyle(
                  color: Colors.yellow,
                ),
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    //distinguish between real external link & jiki link
                    print("clicked!");
                  },
              )
            ],
          )
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.3.9, on macOS 13.0.1 22A400 darwin-arm, locale en-GB)
    • Flutter version 3.3.9 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (9 days ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version 1.73.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.54.0

[✓] Connected device (4 available)
    • M2007J20CG (mobile)    • 5dd3be00                             • android-arm64  • Android 12 (API 31)
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.71

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

[!] Flutter (Channel master, 3.6.0-13.0.pre.24, on macOS 13.0.1 22A400 darwin-arm64, locale en-GB)
    • Flutter version 3.6.0-13.0.pre.24 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4878f26ab0 (7 hours ago), 2022-11-30 23:18:19 -0500
    • Engine revision 441229a95c
    • Dart version 2.19.0 (build 2.19.0-444.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[!] Android Studio
    • Android Studio at /Applications/Android Studio Preview 2.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9123335/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] Android Studio (version 2021.3)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/213.7172.25.2113.9014738/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] VS Code (version 1.73.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.54.0

[✓] Connected device (4 available)
    • M2007J20CG (mobile)    • 5dd3be00                             • android-arm64  • Android 12 (API 31)
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.71

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.