パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細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

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。