https://github.com/surfstudio/surf-flutter-faded-text
Made by Surf 🏄
https://github.com/surfstudio/surf-flutter-faded-text
Last synced: 7 months ago
JSON representation
Made by Surf 🏄
- Host: GitHub
- URL: https://github.com/surfstudio/surf-flutter-faded-text
- Owner: surfstudio
- License: apache-2.0
- Created: 2024-02-05T10:29:23.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-12T10:27:36.000Z (over 1 year ago)
- Last Synced: 2024-04-12T16:32:09.463Z (over 1 year ago)
- Language: Dart
- Homepage:
- Size: 7.82 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# Faded Text
Made by [Surf 🏄♂️🏄♂️🏄♂️](https://surf.dev/)
[](https://github.com/surfstudio/surf-flutter-faded-text)
[](https://app.codecov.io/gh/surfstudio/surf-flutter-faded-text)
[](https://pub.dev/packages/faded_text)
[](https://pub.dev/packages/faded_text)
[](https://pub.dev/packages/faded_text/score)
[](https://www.apache.org/licenses/LICENSE-2.0)
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:](https://surf.dev/flutter/) 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:
```yaml
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`
```dart
Text(
'Lorem ipsum dolor sit amet,
consectetur adipisci and blah blah...',
maxLines: 5,
overflow: TextOverflow.fade,
)
```
```dart
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`
```dart
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,
),
```
```dart
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](./CHANGELOG.md).
## Issues
To report your issues, file directly in the [Issues](https://github.com/surfstudio/faded-text/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](./CONTRIBUTING.md) 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.
[](https://t.me/SurfGear)
## License
[Apache License, Version 2.0](https://www.apache.org/licenses/LICENSE-2.0)