Flutter文本发光效果插件text_lumine的使用

Flutter文本发光效果插件text_lumine的使用

text_lumine 是一个简单的 Flutter 小部件，用于在文本中高亮显示子字符串。该插件支持两种构造函数：

构造函数 1：未命名构造函数

你可以使用此构造函数，当已经计算好所有高亮子字符串的位置时。以下是参数列表：

  • text [必需]：在 UI 上显示的整个文本。
  • key [可选]：用于标识小部件的键。
  • normalTextStyle [可选]：未高亮文本的样式。
  • lumineInfoList [可选]：一个包含 LumineInfo 对象的列表。每个 LumineInfo 对象包含高亮位置的信息。如果列表为空或为 null，则小部件将渲染普通的 Text 小部件。以下是 LumineInfo 对象的属性：
    • startIndex [必需]：要高亮的第一个字符的索引。
    • length [可选]：高亮子字符串的长度。如果未定义，则会高亮到文本末尾。
    • style [可选]：高亮子字符串的样式。

示例代码

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextLumine(
      'Text to highlight',
      lumineInfoList: [
        LumineInfo(startIndex: 0, length: 4, style: TextStyle(color: Colors.red)),
        LumineInfo(startIndex: 8)
      ],
      normalTextStyle: TextStyle(fontSize: 18),
    );
  }
}

构造函数 2：TextLumine.withHighlightedSubstrings

通过此构造函数，你只需提供希望高亮的子字符串列表，小部件会自动找到这些子字符串。以下是参数列表：

  • text [必需]：在 UI 上显示的整个文本。
  • substrings [必需]：要高亮的子字符串列表。
  • key [可选]：用于标识小部件的键。
  • normalTextStyle [可选]：未高亮文本的样式。
  • ignoreDiacritics [可选]：搜索子字符串时不考虑重音符号。
  • ignoreCase [可选]：启用大小写不敏感的子字符串搜索。
  • highlightTextStyle [可选]：高亮子字符串的文本样式。

示例代码

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TextLumine.withHighlightedSubstrings(
      'Text to highlight',
      substrings: ['to', 'highlight'],
      ignoreCase: true,
      highlightTextStyle: TextStyle(
        color: Colors.blue,
        fontWeight: FontWeight.bold,
        backgroundColor: Colors.yellow.withOpacity(0.5),
      ),
    );
  }
}

运行效果

使用上述代码后，你将在屏幕上看到类似的效果：

Text to highlight

更多关于Flutter文本发光效果插件text_lumine的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


在 Flutter 中，如果你想为文本添加发光效果，可以使用 text_lumine 插件。这个插件可以轻松地为文本添加发光效果，使得文本看起来更加醒目和美观。以下是使用 text_lumine 插件的步骤：

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 text_lumine 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  text_lumine: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 text_lumine 包：

import 'package:text_lumine/text_lumine.dart';

3. 使用 TextLumine 小部件

你可以使用 TextLumine 小部件来创建带有发光效果的文本。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Text Lumine Example'),
        ),
        body: Center(
          child: TextLumine(
            text: 'Glowing Text',
            glowColor: Colors.blue, // 发光颜色
            blurRadius: 10.0, // 模糊半径
            textStyle: TextStyle(
              fontSize: 40.0,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部