You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在flutter_linkify包中实现浏览器打开链接?

如何让flutter_linkify在浏览器中打开链接

当然可以实现,只需要借助url_launcher包,通过Linkify组件的onTap回调自定义链接打开逻辑即可,步骤如下:

  1. 添加依赖
    在pubspec.yaml中引入两个包的依赖:
dependencies:
  flutter_linkify: ^6.0.0
  url_launcher: ^6.2.0

执行flutter pub get安装依赖。

  1. 自定义链接打开逻辑
    在Linkify组件中设置onTap参数,在回调里调用launchUrl并指定打开模式为外部浏览器:
import 'package:flutter/material.dart';
import 'package:flutter_linkify/flutter_linkify.dart';
import 'package:url_launcher/url_launcher.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Linkify(
          text: "查看文档:https://example.com/docs,或者访问项目主页:https://example.com/repo",
          style: const TextStyle(fontSize: 16),
          linkStyle: const TextStyle(color: Colors.blue),
          onTap: (link) async {
            final uri = Uri.parse(link.url);
            if (await canLaunchUrl(uri)) {
              // 指定使用外部浏览器打开链接
              await launchUrl(uri, mode: LaunchMode.externalApplication);
            }
          },
        ),
      ),
    );
  }
}

关键说明:

  • LaunchMode.externalApplication会强制调用系统默认浏览器打开链接,而非应用内的WebView
  • canLaunchUrl用于提前检查链接是否可以被正常打开,避免异常

内容的提问来源于stack exchange,提问作者ItsSaed

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.18 11:46:08