Flutter关键词高亮显示插件flutter_keyword_highlighter的使用

Flutter关键词高亮显示插件flutter_keyword_highlighter的使用

flutter_keyword_highlighter 是一个高度可定制的 Flutter 包，它使得在文本块中轻松高亮特定关键字或短语变得非常容易。无论你需要强调关键术语、支持搜索功能还是增强教育内容的可读性，这个包提供了广泛的样式选项来为每个高亮的文本应用独特的样式。你可以选择高亮精确匹配还是包含关键字的任何实例，使其适用于各种不同的用例。

功能

• 高亮关键词：定义要在文本中强调的单词或短语，提高可见性和焦点。
• 自定义每个高亮的样式：为每个高亮的文本应用独特的样式，如颜色、字体粗细或字体大小。
• 匹配选项：选择精确单词匹配或部分匹配以扩展搜索和高亮选项。
• 统一文本样式：指定默认样式以保持未高亮文本的统一外观。
• 适应文本颜色：当未指定默认颜色时，该小部件会自动适应应用程序的主题，在浅色模式下使用黑色文本，在深色模式下使用白色文本。

安装

在 pubspec.yaml 文件中添加该包：

dependencies:
  flutter_keyword_highlighter: ^1.1.1 # 检查 pub.dev 上的最新版本

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 flutter_keyword_highlighter 插件来高亮显示文本中的关键词。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Keyword Highlighter 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HighlightExampleScreen(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '关键词高亮示例',
          style: TextStyle(fontSize: 18.0),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: HighlightedText(
          content:
              'Flutter 是由 Google 创建的开源 UI 软件开发工具包。它用于开发跨平台的应用程序，如 Android、iOS、Linux 等等。',
          defaultTextStyle: const TextStyle(
            fontSize: 16.0,
          ),
          highlightedTextStyles: [
            HighlightedTextStyle(
              highlightedText: 'Flutter',
              customStyle: const TextStyle(
                  color: Colors.blue, fontWeight: FontWeight.bold),
              allowsPartialMatch:
                  true, // 高亮任何出现 "Flutter" 的地方
            ),
            HighlightedTextStyle(
              highlightedText: 'Google',
              customStyle: const TextStyle(
                  color: Colors.green, fontStyle: FontStyle.italic),
              allowsPartialMatch:
                  false, // 高亮完全匹配 "Google" 的单词
            ),
            HighlightedTextStyle(
              highlightedText: '应用程序',
              customStyle: const TextStyle(
                  backgroundColor: Colors.yellow,
                  color: Colors.red,
                  fontWeight: FontWeight.w600),
            ),
          ],
        ),
      ),
    );
  }
}