Flutter Web端是否不支持Firebase Dynamic Links？

背景 #

用户场景：在应用中创建物品清单，分享链接后，点击者无需安装应用，直接在浏览器查看清单。

已完成的操作：

• 编写PackDynamicLinkService类生成Firebase动态链接，调用后得到类似 https://appName.app/p?pack=lVeSBUHoLX52zPqAiB9A 的链接；
• 在main.dart中尝试用FirebaseDynamicLinks.instance.getInitialLink()获取参数，但部署到Firebase Hosting时触发错误：

Uncaught MissingPluginException(No implementation found for method
FirebaseDynamicLinks#getInitialLink on channel
plugins.flutter.io/firebase_dynamic_links)

问题核心：firebase_dynamic_links包暂不支持Flutter Web端，但你的场景完全可以实现，以下是两种可行方案：

方案一：Web原生URL参数解析 #

直接利用Dart的dart:html库获取当前URL的查询参数，跳过Firebase Dynamic Links的Web端调用：

代码实现 #

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

void handleDynamicLink() async {
  if (kIsWeb) {
    // Web端直接解析URL参数
    final currentUri = Uri.parse(html.window.location.href);
    final packId = currentUri.queryParameters['pack'];
    if (packId != null) {
      // 此处添加加载对应清单数据的逻辑
      print('获取到的packID：$packId');
    }
  } else {
    // 移动端保留原有Firebase Dynamic Links逻辑
    final PendingDynamicLinkData? initialLink =
        await FirebaseDynamicLinks.instance.getInitialLink();
    if (initialLink != null) {
      final Uri fullLink = initialLink.link;
      print('获取到的packID：${fullLink.queryParameters['pack']}');
    }
  }
}

注意事项 #

通过kIsWeb条件编译确保仅在Web端引入dart:html，避免移动端编译报错。

方案二：结合Firebase Hosting重写与Flutter路由 #

通过Firebase Hosting的重写规则确保所有分享链接指向Flutter Web入口，再用路由框架解析参数：

1. 配置Firebase Hosting重写规则 #

在firebase.json中添加规则，让所有/p开头的请求都跳转到Flutter的index.html：

{
  "hosting": {
    "public": "build/web",
    "rewrites": [
      {
        "source": "/p**",
        "destination": "/index.html"
      }
    ]
  }
}

2. 用路由框架解析参数（以GoRouter为例） #

import 'package:go_router/go_router.dart';

final GoRouter router = GoRouter(
  routes: <RouteBase>[
    GoRoute(
      path: '/p',
      builder: (context, state) {
        // 从路由状态中提取pack参数
        final packId = state.queryParameters['pack'];
        return PackDetailPage(packId: packId);
      },
    ),
    // 其他应用路由示例
    GoRoute(
      path: '/',
      builder: (context, state) => HomePage(),
    ),
  ],
);

动态链接创建的兼容建议 #

生成动态链接时保持现有移动端逻辑不变，但确保link参数指向你的Firebase Hosting地址（即https://appName.app/p?pack=$packID），这样：

• 移动端用户点击链接会打开App并解析参数；
• Web端用户点击链接会直接跳转到浏览器中的清单页面。

内容的提问来源于stack exchange，提问作者Ten Digit Grid