Flutter Web按钮点击无法同时打开URL与跳转页面问题求助

问题根源 #

1. 未正确调用异步函数：原代码中_launchUrl;只是引用函数，没有执行调用，正确写法是_launchUrl();
2. 异步操作未等待：_launchUrl是异步函数，直接执行后立刻调用Navigator跳转，可能导致浏览器因上下文变化拦截新标签打开操作，或者异步操作还未完成就已跳转页面。

修正后的代码 #

首先确保launchUrl使用正确的启动模式（Web端需指定打开新标签），然后修改按钮的onPressed为异步函数并等待_launchUrl执行：

ElevatedButton(
  onPressed: () async {
    // 先等待打开URL的操作完成
    await _launchUrl();
    // 再执行页面跳转
    Navigator.pushAndRemoveUntil(
      context,
      MaterialPageRoute(builder: (BuildContext context) => MyHomePage()),
      (Route<dynamic> route) => false,
    );
  },
  child: Text('pagarpedido'.tr()),
),

同时更新_launchUrl函数，明确指定启动模式为externalApplication（Web端会在新标签打开链接）：

Future<void> _launchUrl() async {
  final Uri url = Uri.parse(_url); // 确保_url是正确的Uri格式
  if (!await launchUrl(
    url,
    mode: LaunchMode.externalApplication, // 强制在外部应用/新标签打开
  )) {
    throw 'Could not launch $_url';
  }
}

关键说明 #

• 异步等待：使用async/await确保打开URL的操作优先完成，避免浏览器因页面跳转中断新标签的创建
• 启动模式：LaunchMode.externalApplication在Web端会触发浏览器打开新标签，而默认模式可能在当前上下文打开，导致被跳转操作覆盖
• 函数调用：必须通过()调用异步函数，否则函数不会执行

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