ducafecatFlutter 생태계 탐색
FLUTTER ECOSYSTEM

surfstudio/surf-flutter-faded-text

Surf 에 의해 제작됨 🏄

GitHub에서 보기 ↗
surf-flutter-faded-text 프로젝트 이미지
Stars
3
Forks
1
최근 푸시(UTC)
2024. 4. 18.
프로젝트 상태
활성
Surf GitHub avatar
GITHUB Organization

Surf ↗

United States of America공식 웹사이트 ↗
언어DartC++CMakeHTMLSwiftCKotlinObjective-C

이 저장소가 배포한 패키지

사용 중인 의존성

의존성 목록 5 개
  • flutter{"sdk":"flutter"}
  • flutter_test개발 의존성{"sdk":"flutter"}
  • golden_toolkit개발 의존성^0.15.0
  • surf_lint_rules개발 의존성^3.0.0
  • test개발 의존성^1.24.9

원본 README

아래는 영문 원문 스냅샷입니다. 최신 내용은 GitHub에서 확인하세요.

README 펼치기 / 접기

Faded Text

https://raw.githubusercontent.com/surfstudio/flutter-open-source/main/assets/logo_black.png#gh-light-mode-only https://raw.githubusercontent.com/surfstudio/flutter-open-source/main/assets/logo_white.png#gh-dark-mode-only

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`
https://i.ibb.co/dLghB0q/example-text.png https://i.ibb.co/3vjgKJg/example-faded-text.png

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
https://i.ibb.co/PznwK7t/example-text-rich.png https://i.ibb.co/hM0Kk3g/example-faded-text-rich.png

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