Flutter智能文本处理插件smart_text_flutter的使用

Smart Text Flutter

Smart Text Flutter 是一个用于在纯文本中查找链接的Flutter插件。它在iOS上使用 NSDataDetector ，在Android上使用 TextClassifier 。

平台支持

支持的链接类型

enum ItemSpanType { address, phone, email, datetime, url, text }

使用方法

要在项目中使用此插件，需要在 pubspec.yaml 文件中添加 smart_text_flutter 依赖。

示例代码

以下是一个完整的示例，展示了如何使用 smart_text_flutter 插件来处理包含多种类型链接的文本，并将这些链接高亮显示。

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

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

class SmartTextFlutterExample extends StatefulWidget {
  const SmartTextFlutterExample({super.key});

  @override
  State<SmartTextFlutterExample> createState() => _SmartTextFlutterExampleState();
}

class _SmartTextFlutterExampleState extends State<SmartTextFlutterExample> {
  final List<String> messageTexts = [];
  late final TextEditingController _messageController = TextEditingController();

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Smart Text Flutter'),
        ),
        body: Column(
          children: [
            Expanded(
              child: ListView.builder(
                itemCount: messageTexts.length,
                itemBuilder: (context, index) => Align(
                  alignment: Alignment.centerLeft,
                  child: Container(
                    constraints: BoxConstraints(
                      maxWidth: MediaQuery.sizeOf(context).width * 0.8,
                    ),
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(16),
                      color: Colors.blueGrey.shade50,
                    ),
                    padding: const EdgeInsets.all(8),
                    margin: const EdgeInsets.all(8),
                    child: SmartText(
                      messageTexts[index],
                      config: const ItemSpanConfig(
                        textStyle: TextStyle(color: Colors.blue),
                      ),
                      addressConfig: ItemSpanConfig(
                        textStyle: const TextStyle(color: Colors.red),
                        onClicked: (data) => print('Address clicked: $data'),
                      ),
                      emailConfig: ItemSpanConfig(
                        textStyle: const TextStyle(color: Colors.green),
                        onClicked: (data) => print('Email clicked: $data'),
                      ),
                      phoneConfig: ItemSpanConfig(
                        textStyle: const TextStyle(color: Colors.purple),
                        onClicked: (data) => print('Phone clicked: $data'),
                      ),
                      urlConfig: ItemSpanConfig(
                        textStyle: const TextStyle(color: Colors.orange),
                        onClicked: (data) => print('URL clicked: $data'),
                      ),
                      dateTimeConfig: ItemSpanConfig(
                        textStyle: const TextStyle(color: Colors.brown),
                        onClicked: (data) => print('DateTime clicked: $data'),
                      ),
                    ),
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: _messageController,
                      decoration: const InputDecoration(
                        hintText: 'Enter text',
                        contentPadding: EdgeInsets.all(8),
                        border: OutlineInputBorder(),
                      ),
                    ),
                  ),
                  const SizedBox(width: 8),
                  ElevatedButton(
                    onPressed: () {
                      setState(() => messageTexts.add(_messageController.text));
                      _messageController.clear();
                    },
                    child: const Text('Send Message'),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 40),
          ],
        ),
      ),
    );
  }
}

注意事项

• DateTime 不支持于 Android
• 地址不支持于 Android 8.1 (API 27) 及以下版本
• DateTime 点击没有默认实现（点击时会返回格式化后的日期）

属性说明

SmartText 的属性包括但不限于：

• text: 需要处理的文本内容。
• config: 全局配置，影响整个文本的样式和点击事件。
• addressConfig, phoneConfig, emailConfig, urlConfig, dateTimeConfig: 分别针对不同类型链接的配置。
• humanize: 是否去除 URL 中的协议部分（如 http:// 或 https://）。
• 其他属性与 Flutter 的 Text 组件相同，如 strutStyle, textAlign, textDirection 等。

ItemSpanConfig

ItemSpanConfig 用于配置特定类型的链接样式和点击事件：

/// The [TextStyle] for the link
final TextStyle? textStyle;

/// The method called when a link is clicked
final void Function(String data)? onClicked;

完整的 SmartText 示例

SmartText(
  text,
  config: const ItemSpanConfig(
    textStyle: TextStyle(color: Colors.blue),
  ),
  addressConfig: ItemSpanConfig(
    textStyle: const TextStyle(color: Colors.red),
    onClicked: (data) => print('Address clicked: $data'),
  ),
  emailConfig: ItemSpanConfig(
    textStyle: const TextStyle(color: Colors.green),
    onClicked: (data) => print('Email clicked: $data'),
  ),
  phoneConfig: ItemSpanConfig(
    textStyle: const TextStyle(color: Colors.purple),
    onClicked: (data) => print('Phone clicked: $data'),
  ),
  urlConfig: ItemSpanConfig(
    textStyle: const TextStyle(color: Colors.orange),
    onClicked: (data) => print('URL clicked: $data'),
  ),
  dateTimeConfig: ItemSpanConfig(
    textStyle: const TextStyle(color: Colors.brown),
    onClicked: (data) => print('DateTime clicked: $data'),
  ),
)

Bug 和功能请求

如果遇到任何问题或有功能需求，请在 GitHub 上提交 issue 或 feature request。欢迎提交 Pull Request！

通过以上内容，您可以快速上手并使用 smart_text_flutter 插件，在您的 Flutter 应用中实现智能文本处理和链接识别功能。