Flutter Web开发中如何实现在新标签页打开页面？

实现逻辑 #

Flutter Web 可以直接调用Web平台原生API实现新标签页跳转，分为两种常用场景：

场景1：打开指定URL页面（外部链接/自定义地址） #

• 首先在文件头部导入Web专属包：import 'dart:html' as html;
• 调用open方法即可打开新标签页，示例代码：

  // 第二个参数固定为'_blank'即代表新标签页打开
  html.window.open('https://目标页面地址', '_blank');
  

场景2：打开应用内部的第二个页面 #

• 先确认你的Flutter Web配置的路由模式（hash路由/path路由），拼接出目标页面对应的完整访问地址：
  • hash路由示例：应用根地址为https://your.app，第二个页面对应路由为/second，完整地址为https://your.app/#/second
  • path路由示例：上述场景完整地址为https://your.app/second
• 同样调用window.open方法传入拼接好的内部地址即可。

注意事项 #

如果你的项目是多端兼容项目（同时支持移动端、Web端），必须添加平台判断，避免非Web环境导入dart:html导致编译报错，参考实现：

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

void openNewTab(String targetUrl) {
  // 仅在Web平台执行该逻辑
  if (kIsWeb) {
    html.window.open(targetUrl, '_blank');
    return;
  }
  // 非Web平台的其他跳转逻辑可写在这里
}

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