Flutter Web应用使用Firebase Dynamic Links的问题及解决办法咨询

由于firebase_dynamic_links包确实不支持Web平台，以下是几个可行的替代方案：

方案一：直接调用Firebase Web原生SDK处理动态链接 #

绕过Flutter端的包，直接用Firebase Web SDK解析链接：

1. 在Web项目的index.html中引入Firebase动态链接SDK：

   <script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-dynamic-links.js"></script>
   

2. 在Flutter代码中通过dart:js调用Web端逻辑：

   import 'dart:js' as js;
   
   void initDynamicLinks() {
     js.context.callMethod('handleDynamicLinks');
   }
   

3. 在index.html中添加对应的JavaScript处理代码：

   function handleDynamicLinks() {
     const dynamicLinks = firebase.dynamicLinks();
     dynamicLinks.getLink().then((link) => {
       if (link) {
         // 将解析后的链接传递给Flutter应用
         window.flutter_inappwebview.callHandler('handleDynamicLink', link.url);
       }
     }).catch((error) => {
       console.error('获取动态链接失败:', error);
     });
   }
   

4. 在Flutter中监听回调，处理解析后的链接参数。

方案二：自定义重定向与参数解析逻辑 #

通过Firebase控制台配置重定向，在Flutter Web内自行解析参数：

• 在Firebase动态链接控制台，将Web平台的重定向URL设置为你的Flutter Web应用的专属回调地址（比如https://yourapp.com/web-callback）。
• 在Flutter Web中创建对应路由（如/web-callback），当用户打开动态链接时，Firebase会将原始深度链接参数附加到重定向URL后（格式类似https://yourapp.com/web-callback?link=https://yourapp.com/deep-link）。
• 在路由逻辑中解析参数并跳转，示例代码：

  import 'package:flutter/material.dart';
  import 'package:url_strategy/url_strategy.dart';
  
  void main() {
    setPathUrlStrategy();
    runApp(const MyApp());
  }
  
  class MyApp extends StatelessWidget {
    const MyApp({super.key});
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        initialRoute: '/',
        routes: {
          '/': (context) => const HomePage(),
          '/web-callback': (context) => const DynamicLinkCallbackPage(),
        },
      );
    }
  }
  
  class DynamicLinkCallbackPage extends StatefulWidget {
    const DynamicLinkCallbackPage({super.key});
  
    @override
    State<DynamicLinkCallbackPage> createState() => _DynamicLinkCallbackPageState();
  }
  
  class _DynamicLinkCallbackPageState extends State<DynamicLinkCallbackPage> {
    @override
    void initState() {
      super.initState();
      _parseDynamicLink();
    }
  
    void _parseDynamicLink() async {
      final uri = Uri.base;
      final linkParam = uri.queryParameters['link'];
      if (linkParam != null) {
        final deepLink = Uri.parse(linkParam);
        // 根据深度链接路径跳转到对应页面
        if (deepLink.path.startsWith('/product/')) {
          final productId = deepLink.path.split('/').last;
          Navigator.pushReplacementNamed(context, '/product', arguments: productId);
        }
      } else {
        Navigator.pushReplacementNamed(context, '/');
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return const Scaffold(
        body: Center(child: CircularProgressIndicator()),
      );
    }
  }
  

方案三：替换为支持Web的第三方深度链接服务 #

如果Firebase的Web支持无法满足需求，可以切换到专门支持多平台（含Web）的深度链接服务，这类服务提供成熟的Flutter插件，能直接在Web端处理深度链接逻辑。

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