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.

Simulator Screenshot - iPhone 15 Pro - 2026-04-22 at 21 09 41

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

Libraries

fade_text