Flutter文本渐变效果插件text_gradiate的使用

Text Gradiate 👉🏻 For Colorful Texts

text_gradiate 是一个用于在Flutter应用中快速创建渐变文本的插件。它允许你轻松地为你的Flutter应用添加具有渐变效果的文本。

Features🌈

• 轻松创建带有渐变颜色的文本。
• 自定义渐变颜色和类型，包括线性、径向或扫掠渐变。
• 控制各种渐变属性，如起点和终点、平铺策略、中心和焦点位置、焦点半径、角度、停止点和变换矩阵。

Screenshots📸

Installation📦

要使用此插件，请在 pubspec.yaml 文件中添加 text_gradiate 作为依赖项。

dependencies:
  text_gradiate: ^1.0.1

然后，在Dart代码中导入该包：

import 'package:text_gradiate/text_gradiate.dart';

Usage🛠️

将你的文本小部件用 TextGradiate 包裹，并指定所需的渐变属性。

TextGradiate(
  text: Text(
    'Hello, Gradient!',
    style: TextStyle(fontSize: 24.0),
  ),
  colors: [Colors.blue, Colors.green],
  gradientType: GradientType.linear,
  begin: Alignment.centerLeft,
  end: Alignment.centerRight,
  tileMode: TileMode.clamp,
)

Example🫣

以下是一个简单的示例，展示了如何使用 TextGradiate 小部件及其部分属性：

import 'package:flutter/material.dart';
import 'package:text_gradiate/text_gradiate.dart';

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

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text('TextGradiate Example'),
          ),
          body: const Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextGradiate(
                  text: Text(
                    'Hello, Gradient!',
                    style: TextStyle(fontSize: 24.0),
                  ),
                  colors: [Colors.blue, Colors.green],
                  gradientType: GradientType.linear,
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  tileMode: TileMode.clamp,
                ),
                SizedBox(height: 20),
                TextGradiate(
                  text: Text(
                    'Flutter is awesome!',
                    style: TextStyle(fontSize: 24.0),
                  ),
                  colors: [Colors.red, Colors.orange],
                  gradientType: GradientType.linear,
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  tileMode: TileMode.clamp,
                ),
              ],
            ),
          ),
        ),
      );
}

Properties Usage🫧

• text: 要应用渐变效果的子组件。
• colors: 渐变使用的颜色列表。
• gradientType: 渐变类型（linear、radial 或 sweep）。
• begin（仅限线性渐变）：渐变的起始点。
• end（仅限线性渐变）：渐变的结束点。
• tileMode（仅限线性渐变）：渐变的平铺策略。
• center（仅限径向和扫掠渐变）：渐变的中心点。
• focal（仅限径向渐变）：渐变的焦点位置。
• focalRadius（仅限径向渐变）：渐变的焦点半径。
• startAngle（仅限扫掠渐变）：渐变的起始角度。
• endAngle（仅限扫掠渐变）：渐变的结束角度。
• stops: 渐变的停靠点。
• transform: 渐变的变换矩阵（仅适用于线性和扫掠渐变）。

Support❤️

• Android: 支持SDK 16及以上版本。
• iOS: 支持iOS 11.0及以上版本。
• Linux: 支持所有Linux发行版。
• macOS: 支持macOS 10.14及以上版本。
• Web: 支持所有Web浏览器。
• Windows: 支持所有Windows版本。

希望这个帖子能帮助你更好地理解和使用 text_gradiate 插件！如果有任何问题或需要进一步的帮助，请随时提问。