Flutter Firebase动态链接如何携带自定义动态参数实现跳转？

一、动态生成带商品ID的链接 #

不需要在Firebase控制台手动配置固定参数，直接通过代码生成包含动态商品ID的动态链接即可。使用firebase_dynamic_links包，在Flutter端生成链接的示例如下：

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';

Future<Uri> generateProductLink(String productId) async {
  final params = DynamicLinkParameters(
    // 替换成你在Firebase控制台设置的链接前缀
    uriPrefix: 'https://yourapp.page.link',
    // 核心：把商品ID作为query参数嵌入深层链接
    link: Uri.parse('https://yourapp.com/products?id=$productId'),
    androidParameters: AndroidParameters(
      packageName: 'com.yourcompany.yourapp',
      minimumVersion: 1, // 适配你的最低版本
    ),
    iosParameters: IOSParameters(
      bundleId: 'com.yourcompany.yourapp',
      appStoreId: '123456789', // 替换成你的App Store ID
      minimumVersion: '1.0',
    ),
    // 可选：设置未安装App时的默认跳转（也可在控制台统一配置）
    navigationInfoParameters: NavigationInfoParameters(
      forcedRedirectEnabled: true,
    ),
  );

  final shortLink = await params.buildShortLink();
  return shortLink.shortUrl;
}

调用这个方法传入不同的productId，就能生成对应商品的动态链接。

二、Flutter端解析动态参数并跳转 #

在App启动或后台唤醒时，监听动态链接并解析其中的商品ID，然后跳转至对应页面：

import 'package:firebase_dynamic_links/firebase_dynamic_links.dart';
import 'package:flutter/material.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  
  // 处理冷启动时的动态链接
  final initialLink = await FirebaseDynamicLinks.instance.getInitialLink();
  if (initialLink != null) {
    _handleDeepLink(initialLink.link);
  }

  // 监听后台唤醒时的动态链接
  FirebaseDynamicLinks.instance.onLink.listen((event) {
    _handleDeepLink(event.link);
  });

  runApp(const MyApp());
}

// 全局导航key，用于在无context时跳转
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      home: const HomePage(),
    );
  }
}

void _handleDeepLink(Uri deepLink) {
  // 解析商品ID
  final productId = deepLink.queryParameters['id'];
  if (productId == null) return;

  // 跳转到商品详情页
  navigatorKey.currentState?.push(
    MaterialPageRoute(
      builder: (context) => ProductDetailPage(productId: productId),
    ),
  );
}

// 示例商品详情页
class ProductDetailPage extends StatelessWidget {
  final String productId;
  const ProductDetailPage({super.key, required this.productId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('商品详情')),
      body: Center(child: Text('商品ID：$productId')),
    );
  }
}

三、控制台配置补充 #

在Firebase控制台的「动态链接」页面，确保你设置的uriPrefix已完成域名验证，同时可以在「链接设置」中统一配置未安装App时的 fallback 跳转地址（直接指向应用商店即可），这样生成的所有动态链接在用户未安装App时都会自动跳转到商店。

四、测试要点 #

1. 生成带不同productId的链接，在未安装App的设备上打开，验证是否跳转到应用商店；
2. 安装App后，点击链接验证是否直接跳转到对应商品页面；
3. 测试App在后台运行时，点击链接是否能唤醒并跳转。

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