Flutter文本淡入淡出效果插件faded_text的使用

Logo Logo

由 Surf 🏄‍♂️🏄‍♂️🏄‍♂️ 制作

通过这个包增强你的Flutter应用，该包设计用于无缝集成多行文本的从左到右的渐变效果。非常适合需要在更复杂的布局中实现单行文本优雅效果的情况。

概述

🔢 在每个平台上启用 - 该包完全用Flutter编写，并在每个平台上启用。
♻️ 完全覆盖测试 - 保证结果和对这个包的期望。
📔 端到端文档 - 实现的每个方面都有文档，因此有全面的理解。
🐄 最佳Flutter专家的支持 - 我们欢迎任何增强想法和贡献。

使用方法

安装

将 faded_text 添加到您的 pubspec.yaml 文件中：

dependencies:
  faded_text: 0.0.6

示例

您需要像创建普通 Text 类一样创建一个 FadedText 类的实例。

普通 `Text` 和 `FadedText` 对比

普通 `Text` 带有渐变效果	`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, )


输出对比：

| 内置 `Text` 的渐变效果 | `FadedText` 的渐变效果 |
|-------------------------|------------------------|
| ![Text Example](https://i.ibb.co/dLghB0q/example-text.png) | ![FadedText Example](https://i.ibb.co/3vjgKJg/example-faded-text.png) |

您还可以像创建普通 `Text.rich` 一样创建 `FadedText.rich`。

| 普通 `Text.rich` 带有渐变效果 | `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,
)
``` |

输出对比：

| 内置 `Text.rich` 的渐变效果 | `FadedText.rich` 的渐变效果 |
|-----------------------------|-----------------------------|
| ![Text Rich Example](https://i.ibb.co/PznwK7t/example-text-rich.png) | ![FadedText Rich Example](https://i.ibb.co/hM0Kk3g/example-faded-text-rich.png) |

### 示例代码

以下是一个完整的示例demo，展示了如何在Flutter应用程序中使用 `FadedText` 和 `FadedText.rich`。

```dart
import 'package:faded_text/faded_text.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Faded Text Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Faded Text Example'),
        ),
        body: const Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            children: [
              Text('Simple text', style: TextStyle(fontSize: 18)),
              SizedBox(
                height: 120,
                child: FadedText(
                  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur siƒnt occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum',
                  maxLines: 4,
                ),
              ),
              Text('Rich text', style: TextStyle(fontSize: 18)),
              Expanded(
                child: FadedText.rich(
                  TextSpan(
                    children: [
                      TextSpan(
                        text:
                            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ',
                      ),
                      TextSpan(
                        text:
                            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                      TextSpan(
                        text:
                            'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
                      ),
                    ],
                  ),
                  maxLines: 6,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多详细信息，请参阅 GitHub项目页面或访问 pub.dev 获取最新版本和文档。

更多关于Flutter文本淡入淡出效果插件faded_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•1 天前

更多关于Flutter文本淡入淡出效果插件faded_text的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用faded_text插件来实现文本淡入淡出效果的代码案例。faded_text插件允许你创建具有动画效果的文本，使得文本可以逐渐显示或隐藏。

首先，确保你已经在pubspec.yaml文件中添加了faded_text依赖：

dependencies:
  flutter:
    sdk: flutter
  faded_text: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中按照以下方式使用FadedText组件：

import 'package:flutter/material.dart';
import 'package:faded_text/faded_text.dart'; // 导入插件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Faded Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Faded Text Example'),
        ),
        body: Center(
          child: FadedTextExample(),
        ),
      ),
    );
  }
}

class FadedTextExample extends StatefulWidget {
  @override
  _FadedTextExampleState createState() => _FadedTextExampleState();
}

class _FadedTextExampleState extends State<FadedTextExample> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true); // 动画反复执行，正向和反向

    _animation = Tween<double>(begin: 0.0, end: 1.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return FadedText(
      text: 'Hello, this is a faded text!',
      style: TextStyle(fontSize: 24, color: Colors.black),
      fadeIn: Curves.easeInOutQuad,
      fadeOut: Curves.easeInOutQuad,
      animation: _animation,
    );
  }
}

在这个示例中，我们做了以下几件事：

导入faded_text插件：在文件顶部导入faded_text包。
创建动画控制器：在_FadedTextExampleState中，我们创建了一个AnimationController并设置它的持续时间为2秒。我们使用vsync: this来同步动画帧。
定义动画：我们定义了一个Tween动画，它从0.0开始到1.0结束，并将其与动画控制器连接。
使用FadedText组件：在build方法中，我们使用FadedText组件来显示动画文本。我们传递了文本内容、文本样式、淡入和淡出的动画曲线以及动画值。

这个示例展示了如何使用faded_text插件创建一个简单的文本淡入淡出效果。你可以根据需要调整动画的持续时间、曲线和其他参数来实现不同的动画效果。

Flutter文本淡入淡出效果插件faded_text的使用

Flutter文本淡入淡出效果插件faded_text的使用

概述

使用方法

安装

示例

普通 Text 和 FadedText 对比

普通 `Text` 和 `FadedText` 对比