跪拜 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 ↗