[PAGE ISSUE]: 'TextField requires a MaterialLocalizations widget'

[TahaTesser]

Page URL

https://docs.flutter.dev/release/breaking-changes/text-field-material-localizations/

Page source

https://github.com/flutter/website/tree/main/src/release/breaking-changes/text-field-material-localizations.md

Describe the problem

Code for "Code after migration (Providing localizations via the Localizations widget);" doesn't work anymore. Still throws the following error

Launching lib\main.dart on Windows in debug mode...
Connecting to VM Service at ws://127.0.0.1:55540/fVg61CQ6g8Q=/ws

════════ Exception caught by widgets library ═══════════════════════════════════
The following assertion was thrown building TextField(dirty, dependencies: [MediaQuery], state: _TextFieldState#527b6):
No Material widget found.

TextField widgets require a Material widget ancestor.
In material design, most widgets are conceptually "printed" on a sheet of material. In Flutter's material library, that material is represented by the Material widget. It is the Material widget that renders ink splashes, for instance. Because of this, many material library widgets require that there be a Material widget in the tree above them.

To introduce a Material widget, you can either directly include one, or use a widget that contains Material itself, such as a Card, Dialog, Drawer, or Scaffold.

The specific widget that could not find a Material ancestor was: TextField
    dirty
    dependencies: [MediaQuery]
    state: _TextFieldState#527b6
The ancestors of this widget were
    Directionality
        textDirection: ltr
    MediaQuery
        MediaQueryData(size: Size(0.0, 0.0), devicePixelRatio: 1.0, textScaleFactor: 1.0, platformBrightness: Brightness.light, padding: EdgeInsets.zero, viewPadding: EdgeInsets.zero, viewInsets: EdgeInsets.zero, alwaysUse24HourFormat: false, accessibleNavigation: false, highContrast: false, disableAnimations: false, invertColors: false, boldText: false, navigationMode: traditional, gestureSettings: DeviceGestureSettings(touchSlop: 18.0))
    Localizations
        locale: en_US
        delegates: DefaultWidgetsLocalizations.delegate(en_US), DefaultMaterialLocalizations.delegate(en_US)
        state: _LocalizationsState#b5d97
    Foo
    ...
The relevant error-causing widget was
TextField
When the exception was thrown, this was the stack
#0      debugCheckHasMaterial.<anonymous closure>
#1      debugCheckHasMaterial
#2      _TextFieldState.build
#3      StatefulElement.build
#4      ComponentElement.performRebuild
#5      StatefulElement.performRebuild
#6      Element.rebuild
#7      ComponentElement._firstBuild
#8      StatefulElement._firstBuild
#9      ComponentElement.mount
...     Normal element mounting (42 frames)
#51     Element.inflateWidget
#52     Element.updateChild
#53     RenderObjectToWidgetElement._rebuild
#54     RenderObjectToWidgetElement.mount
#55     RenderObjectToWidgetAdapter.attachToRenderTree.<anonymous closure>
#56     BuildOwner.buildScope
#57     RenderObjectToWidgetAdapter.attachToRenderTree
#58     WidgetsBinding.attachRootWidget
#59     WidgetsBinding.scheduleAttachRootWidget.<anonymous closure>
(elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
════════════════════════════════════════════════════════════════════════════════

Expected fix

Code snippet for "Code after migration" should work without any error.

Additional context

"Code after migration (Providing localizations using the MaterialApp):" works fine as expected