跪拜 Guibai
← All articles
Flutter · iOS · Android

Upgrading flutter_easyloading to 4.x Leaks MaterialApp's Error TextStyle into Cupertino Popups

By _阿南_ ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

A dependency upgrade that ships a silent styling regression can waste hours of debugging. This particular bug is insidious because the visual breakage — giant red underlined text — looks like a development-mode artifact, not a production library change, and the package changelog gave no warning.

Summary

Upgrading flutter_easyloading from 3.0.5 to 4.x triggers a visual regression where Cupertino modal popups render text in Flutter's internal error TextStyle: 48px red monospace with yellow double underlines. The bug surfaces without any code changes to the app itself.

The root cause is a change in how the package wraps the widget tree. Version 3.0.5 used a plain `Material` widget that provided the default theme text style. Version 4.x explicitly sets `textStyle: DefaultTextStyle.of(context).style`, which resolves to `_errorTextStyle` from `MaterialApp` — the fallback style Flutter uses when a widget lacks a proper `Material` ancestor.

A Cupertino modal popup route sits as a sibling to the main page route inside the Navigator's Overlay, so it does not inherit the page's own `Material` text environment. Instead, it picks up whatever `Material` the EasyLoading wrapper provides, which now carries the error style. The fix is a one-liner in EasyLoading's initialization builder that forces `DefaultTextStyle` back to the theme's body style.

Takeaways
flutter_easyloading 4.x sets its Material textStyle to DefaultTextStyle.of(context).style, which resolves to MaterialApp's internal _errorTextStyle.
The _errorTextStyle is 48px red monospace with yellow double underlines — Flutter's fallback for widgets missing a Material ancestor.
Cupertino modal popup routes live in the Navigator's Overlay as siblings to the main page route, so they inherit the EasyLoading wrapper's Material, not the page's own Material.
The fix overrides EasyLoading's builder to wrap the child in DefaultTextStyle with Theme.of(context).textTheme.bodyMedium.
Version 3.0.5 did not specify a textStyle on its Material widget, so it defaulted to the theme's body style and caused no issue.
Conclusions

Flutter's _errorTextStyle is a deliberately ugly fallback meant to catch missing Material ancestors during development, but a library wrapping MaterialApp can accidentally promote it into production UI.

The Overlay-based routing model means popups and dialogs do not inherit the visual context of the page that triggers them; they inherit from whatever sits above the Navigator, making wrapper libraries a single point of styling failure.

A changelog that omits behavioral changes to the widget tree structure leaves consumers blind to regressions that only manifest in specific widget combinations like Cupertino popups.

Concepts & terms
Overlay
A Flutter widget that manages a stack of entries floating above the main UI, used by Navigator to host routes, dialogs, and popups as independent layers that do not inherit from the page below them.
_errorTextStyle
A constant TextStyle inside MaterialApp (48px red monospace, yellow double underline) used as a fallback when a widget lacks a Material ancestor, serving as a visual warning during development.
DefaultTextStyle
An InheritedWidget in Flutter that provides a default TextStyle to descendant Text widgets. It propagates down the widget tree and can be overridden by wrapping a subtree with a new DefaultTextStyle.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗