fade_text 1.0.0

A Flutter widget that renders text with a smooth horizontal fade (gradient mask) at the leading and/or trailing edge.

fade_text

A Flutter widget that renders text with a smooth horizontal fade (gradient mask) at the leading and/or trailing edge - a drop-in alternative to Text and Text.rich.

Features

• Fade at the trailing edge (default), leading edge, or both sides
• Works with plain strings (FadeText) and rich text (FadeText.rich)
• Inline GestureRecognizers and semantics work correctly
• RTL text direction supported
• Configurable fade width in logical pixels

Usage

Plain text, trailing fade

FadeText(
  'A very long title that might not fit on screen',
  fadeDirection: FadeDirection.trailing,
  fadeWidth: 40,
  style: const TextStyle(fontSize: 18),
)

Leading fade

FadeText(
  'Text that fades at the start',
  fadeDirection: FadeDirection.leading,
  fadeWidth: 40,
)

Fade on both sides

FadeText(
  'Text that fades on both sides',
  fadeDirection: FadeDirection.both,
  fadeWidth: 32,
)

Rich text with tap gesture

FadeText.rich(
  TextSpan(
    children: [
      const TextSpan(text: 'Regular and '),
      TextSpan(
        text: 'tappable',
        recognizer: TapGestureRecognizer()..onTap = () => print('tapped'),
        style: const TextStyle(decoration: TextDecoration.underline),
      ),
      const TextSpan(text: ' text'),
    ],
  ),
  fadeDirection: FadeDirection.trailing,
  fadeWidth: 40,
)

Advanced: FadeTextSpan as root span

Pass a FadeTextSpan directly to FadeText.rich to control fade settings per-span:

FadeText.rich(
  FadeTextSpan(
    fadeWidth: 60,
    fadeDirection: FadeDirection.both,
    children: [
      const TextSpan(text: 'Custom '),
      const TextSpan(text: 'span tree'),
    ],
  ),
)

API

Parameter	Type	Default	Description
fadeWidth	double?	32.0	Width of the gradient fade in logical pixels
fadeDirection	FadeDirection?	trailing	Which edge(s) to fade
style	TextStyle?	ambient	Text style
maxLines	int?	null	Max number of lines
ellipsis	String?	null	Overflow string (e.g. '…')
textScaler	TextScaler?	MediaQuery	Text scaling; respects system font-size by default

FadeDirection values: leading, trailing, both.

How it works

FadeText lays out text with a TextPainter inside a LayoutBuilder, then renders two stacked layers:

1. A transparent RichText - handles gestures and accessibility semantics
2. A CustomPaint on top - draws the text and applies a BlendMode.dstIn gradient mask via canvas.saveLayer