如何从API响应文本提取Zoom链接并实现可点击与差异化样式？

核心思路 #

利用flutter_html的customRender能力，拦截HTML中的<a>标签，判断是否为Zoom链接后自定义样式和点击逻辑，无需额外提取链接即可实现需求。

步骤实现 #

1. 添加依赖
   在pubspec.yaml中引入所需包：

dependencies:
  flutter:
    sdk: flutter
  flutter_html: ^3.0.0 # 使用最新稳定版本
  url_launcher: ^6.1.12 # 用于处理链接跳转

2. 编写自定义渲染逻辑
   通过customRender拦截<a>标签，针对Zoom链接设置差异化样式和点击事件：

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:url_launcher/url_launcher.dart';

class ZoomLinkRenderer extends StatelessWidget {
  // API返回的HTML内容
  final String apiHtml = """
<p>This is my API response.
Now I want to extract zoom Link, make it clickable and also style it differently.
It is not in a separate html tag so I find it confusing to achieve it.
&lt;1&gt;Hey ladies and gentelmen&lt;/1&gt;

<p>info-&lt;/&gt;

<p>Date: 8909-78-09</p>

<p>time: Evening</p>

<p>Platform: (Zoom)</p>

<p>To participate: <a href="https://us06web.zoom.us/j/2670566985?pwd=UTRYVHN5YWl0aU5rclBmaXZ0cGJ6QT0" rel="nofollow noreferrer">https://us06web.zoom.us/j/2670566985?pwd=UTRYVHN5YWl0aU5rclBmaXZ0cGJ6QT0</a></p></p>
""";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Zoom链接处理')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Html(
          data: apiHtml,
          customRender: {
            'a': (context, child, attributes, _) {
              final linkUrl = attributes['href'];
              // 判断是否为Zoom链接
              if (linkUrl != null && linkUrl.contains('zoom.us')) {
                return InkWell(
                  onTap: () async {
                    final uri = Uri.parse(linkUrl);
                    if (await canLaunchUrl(uri)) {
                      await launchUrl(uri, mode: LaunchMode.externalApplication);
                    }
                  },
                  child: Text(
                    linkUrl,
                    style: const TextStyle(
                      color: Colors.blueAccent,
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      decoration: TextDecoration.underline,
                      decorationColor: Colors.blueAccent,
                    ),
                  ),
                );
              }
              // 非Zoom链接使用默认样式
              return DefaultTextStyle(
                style: const TextStyle(color: Colors.grey, decoration: TextDecoration.underline),
                child: child ?? const SizedBox(),
              );
            },
          },
        ),
      ),
    );
  }
}

说明 #

• 拦截<a>标签后，通过href属性判断是否为Zoom链接（包含zoom.us）
• 对Zoom链接使用InkWell实现点击交互，自定义样式（蓝色粗体、下划线）
• 用url_launcher包处理链接跳转，确保在外部浏览器或Zoom应用中打开
• 非Zoom链接可设置单独的默认样式，不影响其他链接的渲染

内容的提问来源于stack exchange，提问作者Ashish