flutter-text-renderinglisted
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`.