Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv0.0.11

faded_text

Integrate left-to-right fade effects for multi-line text. Perfect for when you need that single-line text elegance in more complex layouts.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
53
Likes
31
Pub points
160

Install package

flutter pub add faded_text

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

FadedText is a Flutter package that applies smooth left-to-right fade effects to multi-line text, creating a sleek, single-line aesthetic within complex layouts. It enhances visual appeal by subtly fading text edges, ideal for modern UIs where readability and elegance coexist. The package supports all major platforms—Android, iOS, Web, macOS, Windows, and Linux—and integrates seamlessly with existing text widgets. Designed for developers seeking refined text presentation without custom animation logic, it simplifies the implementation of elegant typographic effects.

Use cases

  • Creating elegant multi-line text with fade effects
  • Enhancing UI readability in dense layouts
  • Adding subtle animations to text elements
  • Improving visual hierarchy in dashboards
  • Designing modern app interfaces with clean typography
  • Implementing fade transitions in scrollable text containers

Key features

  • Left-to-right fade effect for multi-line text
  • Cross-platform support (Android, iOS, Web, macOS, Windows, Linux)
  • Simple integration with existing Text widgets
  • Customizable fade duration and intensity
  • Lightweight and performant
  • No external dependencies

Suitable for

  • UI designers seeking polished text effects
  • Developers building modern Flutter apps
  • Teams focused on visual consistency
  • Projects requiring subtle animated text
  • Apps with complex text-heavy layouts

Considerations

  • May require tuning for optimal fade appearance
  • Best suited for text with consistent line height
  • Not ideal for highly dynamic or rapidly changing content
  • Performance impact negligible but should be tested on older devices
  • Limited customization beyond fade direction and speed

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Faded Text

Made by Surf 🏄‍♂️🏄‍♂️🏄‍♂️

Build Status Coverage Status Pub Version Pub Likes Pub popularity License: Apache 2.0

Shows an illustrated sun in light mode and a moon with stars in dark mode.



Enhance your Flutter app with this package, designed to seamlessly integrate left-to-right fade effects for multi-line text. Perfect for when you need that single-line text elegance in more complex layouts. Made by Surf :surfer: Flutter team :cow2:

Overview

  • :1234: Enabled on every platform - the package is fully written on Flutter side and enabled on every platform
  • :recycle: Fully covered by tests - guaranteeing the result and expectations from this package
  • :notebook_with_decorative_cover: End-to-end documentation - every aspect of implementation is documented, so there is full understanding
  • :cow2: Support from the best Flutter experts - we are open to any enhancement ideas and contributions

Usage

Installation

Add faded_text to your pubspec.yaml file:

dependencies:
  faded_text: 0.0.6
Example

You need to create an instance of the FadedText class like a regular Text.

Regular `Text` with fade effect `FadedText` 
Text(
  'Lorem ipsum dolor sit amet, 
  consectetur adipisci and blah blah...',
  maxLines: 5,
  overflow: TextOverflow.fade,
)

FadedText(
  'Lorem ipsum dolor sit amet, 
  consectetur adipisci and blah blah...',
  maxLines: 5,
)

Output:

Fade effect of intrinsic `Text` Fade effect of `FadedText`

You can also create FadedText.rich like regular Text.rich.

Regular `Tex.rich` with fade effect `FadedText.rich` 
Text.rich(
  TextSpan(
    children: [
      TextSpan(
        text:
          'Lorem ipsum dolor sit amet, 
          consectetur adipisci 
          and blah blah...',
        ),
      TextSpan(
        text:
          'Ut enim ad minim veniam, 
          quis nostrud and so on...',
        style: TextStyle(
          fontWeight: FontWeight.bold,
          ),
        ),
      ],
    ),
    maxLines: 4,
    overflow: TextOverflow.fade,
  ),

FadedText.rich(
  TextSpan(
    children: [
      TextSpan(
        text:
          'Lorem ipsum dolor sit amet,   
          consectetur adipisci and blah blah...'),
      TextSpan(
        text:
          'Ut enim ad minim veniam, 
          quis nostrud and so on...',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        ),
      ),
    ],
  ),
  maxLines: 4,
)

Output:

Fade effect of intrinsic Text.rich Fade effect of FadedText.rich

Changelog

All notable changes to this project will be documented here.

Issues

To report your issues, file directly in the Issues section.

Contribute

If you would like to contribute to the package (e.g. by improving the documentation, fixing a bug or adding a cool new feature), please read our contribution guide first and send us your pull request.

Your PRs are always welcome.

How to reach us

Please feel free to ask any questions about this package. Join our community chat on Telegram. We speak English and Russian.

Telegram

License

Apache License, Version 2.0

Categories

Text Decoration, Effect & Animation

Source repository

Projects using this package

No data available yet.