搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。