设计驱动的 Firebase 在 Flutter 中：使用 SwiftUI 与 Compose 构建自定义应用内消息

Source: Dev.to

🆕 面向设计的 Flutter Firebase：使用 SwiftUI 与 Compose 构建自定义应用内消息

应用内消息在用户与现代应用的交互中扮演关键角色——从促销优惠到提升参与度和用户留存。

Published on: April 11, 2025 · ⏱️ 10 min read

Android 并不容易：使用 Compose 打造自定义 FIAM

设置 Jetpack Compose：墙上的第一块砖 🧱

在深入自定义渲染器之前，我们首先需要在 Flutter 项目的原生 Android 层启用 Jetpack Compose。这意味着要在 build.gradle 文件中配置正确的 buildFeatures，设置 kotlinCompilerExtensionVersion，并引入所有必要的依赖。

buildFeatures {
    compose true
}

composeOptions {
    kotlinCompilerExtensionVersion = "1.4.8"
}

随后我们添加了必备的 Compose 库：

// Compose BOM
implementation platform("androidx.compose:compose-bom:2025.02.00")

// Core UI
implementation "androidx.compose.ui:ui"
implementation "androidx.compose.ui:ui-tooling-preview"
implementation "androidx.compose.material3:material3"

// Runtime
implementation "androidx.activity:activity-compose:1.10.1"

// For debugging previews
debugImplementation "androidx.compose.ui:ui-tooling"

🧨 为什么是 1.4.8 版本？

因为如果在使用 Flutter 自带的 Kotlin 1.8.22 时选择更高的版本，Compose 会礼貌地报错。我们最初尝试了更新的版本，却只收到了这样一条信息：

This version of the Compose Compiler requires Kotlin version 1.9.23 but you are using 1.8.22 which is not known to be compatible…

📌 请查阅 Compose‑Kotlin 兼容性表格 获取更多细节。

随后它又抛出了经典的提示：

“…or suppressKotlinVersionCompatibilityCheck but don’t say I didn’t warn you!”

是的，Compose 可不是闹着玩的 😅。
于是我们将版本锁定在 1.4.8，它能够很好地兼容当前 Flutter 所使用的 Kotlin 版本。

替换默认：构建我们的自定义应用内渲染器

Firebase 告诉我们：实现 FirebaseInAppMessagingDisplay 并注册它。仅此而已。没有示例，也没有 Compose 的文档。只能靠感觉。

FirebaseInAppMessaging.getInstance()
    .setMessageDisplayComponent(NologyInAppMessageDisplay(context))

🧠 自定义 FIAM 的核心：NologyInAppMessageDisplay

class NologyInAppMessageDisplay(private val context: Context) :
    FirebaseInAppMessagingDisplay {

    override fun displayMessage(
        inAppMessage: InAppMessage,
        callbacks: FirebaseInAppMessagingDisplayCallbacks
    ) {
        // Implementation logic
    }
}

此类的功能

• 确认消息类型：仅支持 ModalMessage。
• 手动加载远程图片（与 iOS 不同）。
• 提取按钮样式并解析 appData 以获取可选按钮。
• 将可组合函数包装在 DialogFragment 中。
• 处理操作并调用 messageClicked() / messageDismissed()。

🔍 平台差异：iOS 与 Android

📸 图像处理

🔗 深度链接

🧪 如何测试自定义应用内消息

Firebase 会缓存活动最长 24 小时 — 但测试模式可以使用设备的 FID（Firebase Installation ID） 绕过此限制。

步骤 1：获取 FID

在 Android 上 – 在 Logcat 中查找以下内容：

I/FIAM.Headless: Starting InAppMessaging runtime with Installation ID 

在 iOS 上 – 前往 Xcode → Product > Scheme > Edit Scheme… → 添加参数 -FIRDebugEnabled。然后在日志中找到：

[Firebase/InAppMessaging] Starting InAppMessaging runtime with Firebase Installation ID 

步骤 2：发送测试消息

1. 前往 Firebase → In‑App Messaging → New Campaign。
2. 选择 Modal 布局（⚠️ 仅此布局受自定义渲染器支持）。
3. 添加 自定义数据：

{
  "secondaryTitle": "SKIP",
  "secondaryTextColor": "#000000",
  "secondaryBackgroundColor": "#C9C9C9"
}

4. 点击 Test on your device，粘贴 FID，然后重新打开应用 — 消息应立即出现 💥。

🔗 关于 Deep Links?

设置合适的深度链接支持是一件大事——值得单独写篇文章。我将在后续文章中覆盖所有内容：

• App links 与 Universal Links
• 域名验证
• 各平台的 JSON 文件
• 将路径映射到 Flutter 导航

如果这对你有帮助，请留言，我会优先处理！

✅ 总结

构建 Firebase In‑App Messaging 的自定义布局不仅仅是关于样式——更是关于创建沉浸式、原生、基于分析的体验，以匹配您应用的个性。

🎯 项目目标

• 可靠性： 确保应用在各种设备上始终如一地运行。
• 性能： 保持 UI 流畅且响应迅速。

从深度链接支持到分析跟踪，我们紧贴 Firebase 的原生协议，同时交付出独具特色的 UI 体验。

🙋‍♂️ 谁在背后？

我叫 Salah Nahed，是一名热衷于构建精美跨平台体验的 Flutter & 移动工匠。

• 📦 Bond 的创建者
• 💼 提供咨询 & 自由职业服务
• 🧠 关注我获取更多开发故事

让我们保持联系：

• 🔗 LinkedIn
• 🐦 Twitter/X
• 🐙 GitHub
• 📸 Instagram

感谢阅读 — 下次深度探讨见 ✌️