Faded Text #

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

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 🏄 Flutter team 🐄

Overview #

• 🔢 Enabled on every platform - the package is fully written on Flutter side and enabled on every platform
• ♻️ Fully covered by tests - guaranteeing the result and expectations from this package
• 📔 End-to-end documentation - every aspect of implementation is documented, so there is full understanding
• 🐄 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.

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.

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.

License #

Apache License, Version 2.0