Flutter中如何让TextFormField内的超链接可点击？

要在TextFormField中让用户输入的超链接可点击，同时保留编辑功能，你可以通过自定义TextEditingController并重写其buildTextSpan方法来实现，核心思路是识别文本中的URL，将链接片段渲染成带点击事件的富文本。

步骤1：自定义带链接处理的TextEditingController #

创建继承自TextEditingController的类，在其中完成URL识别和点击事件绑定：

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

class LinkTextEditingController extends TextEditingController {
  // 匹配HTTP/HTTPS、WWW开头链接的正则规则
  final RegExp _urlRegex = RegExp(
    r'(https?://|www\.)[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+(/[a-zA-Z0-9-._~:/?#[\]@!$&\'()*+,;=]*)*',
    caseSensitive: false,
  );

  @override
  TextSpan buildTextSpan({required BuildContext context, TextStyle? style, required bool withComposing}) {
    final List<InlineSpan> textSpans = [];

    text.splitMapJoin(
      _urlRegex,
      onMatch: (Match match) {
        final String url = match.group(0)!;
        textSpans.add(
          TextSpan(
            text: url,
            style: style?.copyWith(
              color: Colors.blue,
              decoration: TextDecoration.underline,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () async {
                // 处理链接跳转，自动补全HTTPS协议
                final Uri uri = Uri.parse(url.startsWith('http') ? url : 'https://$url');
                if (await canLaunchUrl(uri)) {
                  await launchUrl(uri);
                }
              },
          ),
        );
        return '';
      },
      onNonMatch: (String plainText) {
        textSpans.add(TextSpan(text: plainText, style: style));
        return '';
      },
    );

    return TextSpan(style: style, children: textSpans);
  }
}

步骤2：在TextFormField中使用自定义Controller #

将自定义控制器绑定到TextFormField，即可同时保留编辑功能和链接点击：

TextFormField(
  controller: LinkTextEditingController(),
  maxLines: null, // 支持多行输入，适配笔记场景
  decoration: InputDecoration(
    hintText: '输入笔记内容，链接可直接点击...',
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.all(12),
  ),
  // 可继续添加validator、onSaved等TextFormField原有属性
)

注意事项 #

• 依赖准备：代码用到url_launcher包，需在pubspec.yaml中添加依赖并执行flutter pub get。
• 规则扩展：若需支持邮箱、FTP等其他链接格式，可修改_urlRegex的正则规则。
• 编辑体验：该方案完全保留TextFormField的编辑特性，输入时链接会自动识别高亮，点击即可跳转。

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