Repository: flutter
Issue: Textspan's tapGestureRecognizer has unexpected behaviour when the textspan is out of the textfield visible area after the first layout
Labels: a: text input,framework,f: gestures,has reproducible steps,P2,found in release: 3.3,found in release: 3.4,team-framework,triaged-framework

<!-- Thank you for using Flutter!

     If you are looking for support, please check out our documentation
     or consider asking a question on Stack Overflow:
      * https://flutter.dev/
      * https://api.flutter.dev/
      * https://stackoverflow.com/questions/tagged/flutter?sort=frequent

     If you have found a bug or if our documentation doesn't have an answer
     to what you're looking for, then fill out the template below. Please read
     our guide to filing a bug first: https://flutter.dev/docs/resources/bug-reports
-->

## Steps to Reproduce

<!-- Please include full steps to reproduce so that we can reproduce the problem. -->

1. Execute `flutter run` on the code sample (see "Code sample" section below) 
2. Like the code shows below, I want to insert custom string (like "[ hello ]" "[ world ]" ) or common text into a textfiled by override "buildTextSpan" in TextEditingController. 
3. And I add recognizer to each textSpan. But I find  that the textspans which displayed with not exceeding the bounds of textfiled can get a right onTap response, showing the right callback number. The textspans which displayed with exceeding the bounds of textfiled can not get a right callback number.
4. A video is provided below.


**Expected results:** Like the video shows,  when I click the number, the output should be the number clicked.

**Actual results:** when I click 0~44 textspan , it works like a charm. But when I click other number, it prints the number at the range between 0 and 44.

<details>
<summary>Code sample</summary>

<!--
      Please create a minimal reproducible sample that shows the problem
      and attach it below between the lines with the backticks.

      To create it you can use `flutter create bug` command and update the `main.dart` file.

      Alternatively, you can use https://dartpad.dev/
      which is capable of creating and running small Flutter apps.

      Without this we will unlikely be able to progress on the issue, and because of that
      we regretfully will have to close it.
-->

```
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Retrieve Text Input',
      home: MyCustomForm(),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  const MyCustomForm({Key? key}) : super(key: key);

  @override
  State<MyCustomForm> createState() => _MyCustomFormState();
}

// Define a corresponding State class.
// This class holds data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  String? _clickText;
  late final RichTextEditingController myController;

  @override
  void initState() {
    super.initState();
    myController = RichTextEditingController((text) {
      setState(() {
        _clickText = text;
      });
    });
    // Start listening to changes.
    myController.addListener(_printLatestValue);
  }

  @override
  void dispose() {
    // Clean up the controller when the widget is removed from the widget tree.
    // This also removes the _printLatestValue listener.
    myController.dispose();
    super.dispose();
  }

  void _printLatestValue() {
    print('Second text field: ${myController.text}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Retrieve Text Input'),
        ),
        body: Column(
          children: [
            TextField(
              scrollPadding: const EdgeInsets.all(20.0),
              minLines: 1,
              maxLines: 3,
              maxLength: 100,
              maxLengthEnforcement:
                  MaxLengthEnforcement.truncateAfterCompositionEnds,
              onChanged: (text) {},
              controller: myController,
              decoration: InputDecoration(
                  fillColor: Colors.grey[50],
                  filled: true,
                  contentPadding: const EdgeInsets.symmetric(
                      horizontal: 8, vertical: 10)), 
            ),
            Text(_clickText ?? ''),
          ],
        ));
  }
}

class RichTextEditingController extends TextEditingController {
  final Function(String) changeTextCallback;

  RichTextEditingController(this.changeTextCallback);
  @override
  TextSpan buildTextSpan(
      {required BuildContext context,
      TextStyle? style,
      required bool withComposing}) {
    if (!value.isComposingRangeValid || !withComposing) {
      final List<InlineSpan> inlineSpans =
          buildInlineSpans(TextRange(start: 0, end: text.length), style);
      return TextSpan(
        children: inlineSpans,
      );
    }
    final TextStyle composingStyle =
        style?.merge(const TextStyle(decoration: TextDecoration.underline)) ??
            const TextStyle(decoration: TextDecoration.underline);
    return TextSpan(
      children: <TextSpan>[
        TextSpan(
            children: buildInlineSpans(
                TextRange(start: 0, end: value.composing.start), style)),
        TextSpan(
            children: buildInlineSpans(
                TextRange(
                    start: value.composing.start, end: value.composing.end),
                composingStyle)),
        TextSpan(
            children: buildInlineSpans(
                TextRange(start: value.composing.end, end: text.length),
                style)),
      ],
    );
  }

  List<InlineSpan> buildInlineSpans(TextRange range, TextStyle? style) {
    List<TextSpan> list = [];
    for (var i = 0; i < 100; i++) {
      final pp = TextSpan(
          text: '[ ' '$i ' ' ]',
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              changeTextCallback(i.toString());
            });
      list.add(pp);
    }
    return [
      WidgetSpan(
        alignment: PlaceholderAlignment.baseline,
        baseline: TextBaseline.alphabetic,
        child: Text.rich(
          TextSpan(children: list),
          style: const TextStyle(fontSize: 13),
        ),
      )
    ];
  }
}

```

</details>

<details>
  <summary>Logs</summary>

<!--
      Run your application with `flutter run --verbose` and attach all the
      log output below between the lines with the backticks. If there is an
      exception, please see if the error message includes enough information
      to explain how to solve the issue. If there is a crash, please include
      the entirety of the crash log including the backtrace.
-->

```
```

<!--
     Run `flutter analyze` and attach any output of that command below.
     If there are any analysis errors, try resolving them before filing this issue.
-->

```
➜  flutter-demo git:(master) ✗ flutter analyze
Analyzing flutter-demo...                                               
No issues found! (ran in 1.5s)
➜  flutter-demo git:(master) ✗ 
```

<!-- Finally, paste the output of running `flutter doctor -v` here. -->

```

➜  flutter-demo git:(master) ✗ flutter doctor -v
[✓] Flutter (Channel unknown, 3.0.4-0.100.pre, on macOS 12.5.1 21G83 darwin-x64, locale zh-Hans-CN)
    • Flutter version 3.0.4-0.100.pre at /Users/ericlezhou/.rflutter_sdk/rflutter
    • Upstream repository unknown
    • Framework revision bce9107da9 (8 months ago), 2021-12-29 22:34:19 +0800
    • Engine revision 6ba2af10bb
    • Dart version 2.17.5
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/ericlezhou/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7590822)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • 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.11+0-b60-7590822)

[✓] VS Code (version 1.71.0)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.48.0

[✓] Connected device (3 available)
    • iPhone 11 (mobile) • 3E370573-8AB9-44E9-A84B-5F54704C94BB • ios            • com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • macOS (desktop)    • macos                                • darwin-x64     • macOS 12.5.1 21G83 darwin-x64
    • Chrome (web)       • chrome                               • web-javascript • Google Chrome 105.0.5195.102

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!
➜  flutter-demo git:(master) ✗ 
```

</details>


<!--
      Consider also attaching screenshots and/or videos to better
      illustrate the issue.

      You can upload them directly on GitHub.
      Beware that video file size is limited to 10MB.
-->

https://user-images.githubusercontent.com/2748395/188872323-4854444e-fac9-4ca7-9f3f-03fbb898afdf.mov