Flutter Web中如何实现点击按钮打开HTTP链接？

当然可以实现！在Flutter Web里要实现点击按钮打开外部链接，有两种常用的方案，我给你一步步讲清楚：

方法一：使用官方推荐的url_launcher包（跨平台通用） #

这是Flutter官方推荐的处理链接跳转的包，不仅支持Web，还能在iOS、Android等平台使用，兼容性拉满。

1. 添加依赖
   在你的pubspec.yaml文件中添加最新版本的依赖：

   dependencies:
     flutter:
       sdk: flutter
     url_launcher: ^6.2.5 # 可以替换为当前最新版本
   

   然后执行flutter pub get安装依赖。

2. 导入包并实现跳转逻辑
   在需要的页面文件中导入包，然后写一个异步的跳转函数：

   import 'package:flutter/material.dart';
   import 'package:url_launcher/url_launcher.dart';
   
   class MyWebPage extends StatelessWidget {
     Future<void> _launchTestUrl() async {
       final Uri targetUrl = Uri.parse('https://test.com');
       // 尝试打开链接，externalApplication会用系统默认浏览器打开
       if (!await launchUrl(targetUrl, mode: LaunchMode.externalApplication)) {
         throw Exception('无法打开链接：$targetUrl');
       }
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: ElevatedButton(
             onPressed: _launchTestUrl, // 绑定点击事件
             child: const Text('打开测试链接'),
           ),
         ),
       );
     }
   }
   

方法二：直接调用浏览器API（仅Web平台） #

如果你只需要支持Web平台，不想引入第三方包，可以直接调用浏览器的window.open方法，需要用到dart:html库：

import 'package:flutter/material.dart';
import 'dart:html' as html;

class MyWebPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          // 点击直接调用浏览器打开链接，_blank表示在新标签页打开
          onPressed: () => html.window.open('https://test.com', '_blank'),
          child: const Text('打开测试链接'),
        ),
      ),
    );
  }
}

注意事项 #

• 浏览器的弹出窗口拦截机制可能会阻止自动触发的链接跳转，所以一定要通过用户主动点击按钮来触发，不要在页面初始化时自动调用。
• 如果是本地HTML文件或者特殊协议链接，需要调整LaunchMode或者window.open的参数适配。

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