搜索插件、代码仓与 APP 分类

插件详情v0.0.11

faded_text

为多行文本集成从左到右的渐变效果。非常适合在更复杂的布局中需要单行文本优雅感时使用。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
53
喜欢数
31
Pub 分数
160

安装插件

flutter pub add faded_text

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

FadedText 是一个 Flutter 包,可为多行文本应用平滑的从左到右淡入效果,在复杂的布局中创造出简洁的单行视觉效果。通过微妙地淡化文本边缘,它提升了视觉吸引力,非常适合现代 UI 中可读性与优雅并存的设计。该包支持所有主要平台——Android、iOS、Web、macOS、Windows 和 Linux,并能与现有文本控件无缝集成。专为希望实现精致文本展示而无需自定义动画逻辑的开发者设计,它简化了优雅排版效果的实现。

适合场景

  • 创建带有渐变效果的优雅多行文本
  • 在密集布局中提升UI可读性
  • 向文本元素添加细微的动画
  • 改进仪表板中的视觉层次
  • 使用简洁的排版设计现代应用程序界面
  • 在可滚动文本容器中实现淡入淡出过渡效果

主要特点

  • 多行文本的从左到右渐变效果
  • 跨平台支持(Android、iOS、Web、macOS、Windows、Linux)
  • 与现有 Text 小部件的简单集成
  • 可自定义的淡入持续时间和强度
  • 轻量且高效
  • 无外部依赖

适合对象

  • 寻求精美文本效果的UI设计师
  • 开发现代 Flutter 应用的开发者
  • 专注于视觉一致性的团队
  • 需要细微动画文本的项目
  • 具有复杂文本布局的应用程序

使用建议

  • 可能需要调整以获得最佳渐变外观
  • 最适合行高一致的文本
  • 不适合高度动态或快速变化的内容
  • 性能影响可以忽略不计,但应在旧设备上进行测试
  • 除了渐变方向和速度外,自定义选项有限

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。