FadedText는 다중 줄 텍스트에 부드러운 왼쪽에서 오른쪽으로 페이드 효과를 적용하는 Flutter 패키지입니다. 복잡한 레이아웃 내에서도 세련된 단일 줄 미학을 만들어냅니다. 시각적 매력을 높이기 위해 텍스트 가장자리를 미묘하게 페이드하여, 현대적인 UI에서 가독성과 우아함이 공존하는 경우에 이상적입니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원하며 기존 텍스트 위젯과 원활하게 통합됩니다. 사용자 정의 애니메이션 로직 없이 정교한 텍스트 표현을 원하는 개발자를 위한 것으로, 우아한 타이포그래피 효과 구현을 간소화합니다.
사용 사례
페이드 효과를 갖춘 우아한 다중 줄 텍스트 만들기
밀집 레이아웃에서 UI 가독성 향상
텍스트 요소에 미세한 애니메이션 추가
대시보드의 시각적 계층 개선
클린 타이포그래피로 현대적인 앱 인터페이스 디자인하기
스크롤 가능한 텍스트 컨테이너에서 페이드 전환 구현
주요 기능
다중 줄 텍스트의 왼쪽에서 오른쪽으로 페이드 효과
크로스 플랫폼 지원 (Android, iOS, Web, macOS, Windows, Linux)
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.
