← ClaudeAtlas

flutter-text-renderinglisted

Diagnose and fix Flutter text display issues including text overflow, orphaned words, line breaking, truncation, multi-style spans, and text scaling. Use when text clips, leaves dangling single words, overflows containers, or requires rich inline spans; route typography tokens and visual hierarchy to flutter-ui-design and screen-level layout constraints to flutter-responsive-layout.
thiennc-tesoglobal/flutter-skills · ★ 6 · Web & Frontend · score 78
Install: claude install-skill thiennc-tesoglobal/flutter-skills
# Flutter Text Rendering Render readable, predictable text across dynamic content lengths, locales, and accessibility settings. ## Diagnose Identify the failure mechanism before adjusting layout: 1. **Unconstrained flex overflow:** An unconstrained `Text` inside a `Row` or `Flex` expands infinitely, producing `RenderFlex overflowed`. 2. **Orphaned words (widows):** The last word of a headline or paragraph dangles alone on a new line because line breaking occurred at the final whitespace. 3. **Uncontrolled truncation:** Text clips silently or exceeds intended lines without a visible truncation affordance (`ellipsis`, `fade`). 4. **Broken inline flow:** Multiple adjacent `Text` widgets in a `Row` break across lines awkwardly instead of flowing as a continuous paragraph. 5. **Text scale breakage:** Enlarged system font scale (`TextScaler`) causes text to clip inside fixed-height containers or push critical actions offscreen. ## Rules - **Constrain text in flex layouts:** Always wrap `Text` in `Expanded` or `Flexible` when placed inside a `Row`, `Column`, or `Flex` where available space is bounded, and set `overflow: TextOverflow.ellipsis` with explicit `maxLines`. - **Prevent orphaned words:** Use a non-breaking space (`\u00A0`) between the final two words of headings, titles, and callouts so the last word never wraps alone to a new line. - **Choose deliberate truncation:** Pair `maxLines` with `overflow: TextOverflow.ellipsis`, `TextOverflow.fade`, or `TextOverflow.clip`.