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

GradientText

GradientText 是一个用于在 Flutter 中显示带有渐变效果文本的 Widget。它允许将渐变绘制到文本上。

Getting Started（开始使用）

在 pubspec.yaml 文件中添加插件依赖：

dependencies:
  ...
  gradient_text: ^1.0.2

然后运行 flutter pub get 来获取依赖。

Usage（使用方法）

导入插件

在 Dart 文件中导入 gradient_text 插件：

import 'package:gradient_text/gradient_text.dart';

使用示例

以下是一个简单的示例，展示如何使用 GradientText：

// 创建一个带有渐变效果的文本
GradientText("this is my text",
    gradient: LinearGradient(
        colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]), // 定义渐变颜色
    style: TextStyle(fontSize: 42), // 设置字体大小
    textAlign: TextAlign.center); // 设置文本对齐方式

参数说明

• data :: (必填) :: 需要显示的字符串。
• gradient :: (必填) :: 文本的渐变样式。
• style :: (可选) :: 文本的 TextStyle，注意颜色会被忽略，因为文本必须是白色以支持渐变。
• textAlign :: (可选) :: 文本的对齐方式，默认为左对齐。

完整示例代码

以下是一个完整的示例代码，展示了如何动态更改渐变类型、字体大小、阴影和粗细：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(title: 'Gradient Text Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Gradient gradient = LinearGradient(
      colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
  bool shadow = false;
  bool small = false;
  bool bold = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade100,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Card(
                elevation: 3,
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: GradientText(
                    'Linear Gradient',
                    gradient: gradient,
                    style: TextStyle(
                      fontSize: (small) ? 14 : 42,
                      shadows: (shadow) ? [Shadow(color: Colors.black26, offset: Offset(0, 3), blurRadius: 3)] : null,
                      fontWeight: (bold) ? FontWeight.bold : FontWeight.normal,
                    ),
                  ),
                ),
              ),

              CheckboxListTile(
                title: Text("Shadow"),
                value: shadow,
                onChanged: (isOn) {
                  debugPrint("OnChanged");
                  setState(() {
                    shadow = isOn;
                  });
                },
              ),
              CheckboxListTile(
                title: Text("Bold"),
                value: bold,
                onChanged: (isOn) {
                  debugPrint("OnChanged");
                  setState(() {
                    bold = isOn;
                  });
                },
              ),
              CheckboxListTile(
                title: Text("Small"),
                value: small,
                onChanged: (isOn) {
                  debugPrint("OnChanged");
                  setState(() {
                    small = isOn;
                  });
                },
              ),
              Wrap(
                spacing: 10,
                alignment: WrapAlignment.center,
                children: <Widget>[
                  RaisedButton(
                    child: Text("Linear Gradient", style: TextStyle(color: Colors.white)),
                    color: Colors.purple,
                    onPressed: () {
                      setState(() {
                        gradient = LinearGradient(
                            colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text("Radial Gradient", style: TextStyle(color: Colors.white)),
                    color: Colors.pink,
                    onPressed: () {
                      setState(() {
                        gradient = RadialGradient(
                            colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
                      });
                    },
                  ),
                  RaisedButton(
                    child: Text("Sweep Gradient", style: TextStyle(color: Colors.white)),
                    color: Colors.deepOrange,
                    onPressed: () {
                      setState(() {
                        gradient = SweepGradient(
                            colors: [Colors.deepPurple, Colors.deepOrange, Colors.pink]);
                      });
                    },
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}