Repository: flutter
Issue: WidgetSpan on first line of TextField is positioned incorrectly
Labels: a: text input,framework,f: material design,a: layout,has reproducible steps,found in release: 2.8,found in release: 2.9,team-design,triaged-design

## Steps to Reproduce

Consider the following code sample:

```dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text("Test"),
        ),
        body: Column(
          children: [
            Expanded(
                child: Container(
                  color: Colors.blue,
                )),
            Expanded(
                child:
                // Extended
                TextField(
                  minLines: null,
                  maxLines: null,
                  expands: true,
                  textAlignVertical: TextAlignVertical.top,
                  keyboardType: TextInputType.multiline,
                  controller: MyTextEditingController(),
                  //specialTextSpanBuilder: MySpecialTextSpanBuilder(),
                ))
          ],
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

class MyTextEditingController extends TextEditingController {
  @override
  TextSpan buildTextSpan(
      {required BuildContext context,
        TextStyle? style,
        required bool withComposing}) {
    return TextSpan(
      children: [
        // TextSpan(text: '1'),
        WidgetSpan(
          child: Container(
            height: 1000,
            color: Colors.red,
          ),
        )
      ],
    );
  }
}
```

1. Run it as is and see that the red Container is positioned above the TextField it's supposed to be contained in.
2. Uncomment the first TextSpan with text '1' and see that the Container now moves into the TextField like it's supposed to and you can scroll down in the TextField. 

**Expected results:**

Container should be inside the TextField. 

**Actual results:**

Container above TextField. 

![image](https://user-images.githubusercontent.com/14959769/148144879-80dc0c67-4431-4e8f-902f-9386f12be336.png)

<details>
  <summary>Logs</summary>

`flutter doctor -v`

```
[√] Flutter (Channel stable, 2.8.0, on Microsoft Windows [Version 10.0.22000.376], locale en-CA)
    • Flutter version 2.8.0 at D:\Portable Programs\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision cf44000065 (4 weeks ago), 2021-12-08 14:06:50 -0800
    • Engine revision 40a99c5951
    • Dart version 2.15.0

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    • Android SDK at D:\Android_SDK
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.5)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.11.31729.503
    • Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 4.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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 1.8.0_242-release-1644-b01)

[√] IntelliJ IDEA Ultimate Edition (version 2021.2)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.1.3
    • Flutter plugin version 63.0.3
    • Dart plugin version 212.5632

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22000.376]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 96.0.4664.93
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 96.0.1054.29

! Doctor found issues in 1 category.
```

</details>

Originally from https://github.com/fluttercandies/extended_text_field/issues/130#issuecomment-1004549179.