Flutter：实现Web与移动端共用/match/123深度链接的方案咨询

核心思路 #

把/match/*路径同时配置为Firebase动态链接的处理路径和Flutter Web的路由路径，通过服务器端规则区分Web与移动端请求，满足两端需求。

步骤1：扩展Firebase动态链接的路径配置 #

直接在Firebase控制台的动态链接设置里，将myhost添加为自定义动态链接域名，同时设置路径匹配规则为/match/*——这样所有myhost/match/xxx格式的链接都会被Firebase动态链接接管处理。

步骤2：调整动态链接的跳转规则 #

• 移动端：在动态链接配置里设置
  • 已安装App时，跳转至对应App的深度链接（比如iOS Universal Links、Android App Links，映射到Flutter的/match/:id路由）
  • 未安装App时，跳转至Web应用的对应页面myhost/match/:id
• Web端：设置Web平台的跳转规则为「直接打开原链接」，避免Web端加载动态链接的中转页。

步骤3：服务器端添加重写规则（关键） #

根据你的Web托管平台，添加规则区分Web和移动端请求：

• Web请求（通过User-Agent判断非移动设备）：直接路由到Flutter Web的入口index.html，让Flutter处理/match/:id路由
• 移动端请求：交给Firebase动态链接服务处理

以Firebase Hosting的firebase.json配置为例：

{
  "hosting": {
    "public": "build/web",
    "rewrites": [
      {
        "source": "/match/**",
        "condition": {
          "userAgent": "!(Android|iPhone|iPad|iPod)"
        },
        "destination": "/index.html"
      },
      {
        "source": "/match/**",
        "destination": "https://myhost.page.link/match/$1"
      }
    ]
  }
}

（注：myhost.page.link是Firebase默认的动态链接域名，可替换为你的自定义域名）

步骤4：Flutter端适配 #

• 移动端：保留原有的Firebase动态链接监听逻辑，解析链接中的match/123部分，跳转到对应的赛事详情页
• Web端：确保Flutter Web的路由系统能正确响应/match/:id路径，直接渲染赛事详情页

步骤5：验证效果 #

• Web端：访问myhost/match/123，确认直接加载赛事详情页
• 已安装App的移动端：点击链接，确认跳转至App内的赛事页
• 未安装App的移动端：点击链接，确认跳转至Web端的赛事详情页

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