如何在Flutter中实现应用内通知并展示到专属通知页面
2026-10-12
Flutter 应用内通知留存实现方案
核心逻辑非常清晰：推送服务（FCM/OneSignal/本地通知）只负责通知的系统级触达，应用内留存的能力需要你自己实现消息接收拦截、本地持久化存储、页面渲染三个环节即可。
1. 拦截所有推送消息的接收回调
所有主流推送SDK都提供了消息接收的回调接口，不要仅在回调中触发系统通知栏弹框，同步解析通知字段存入本地即可：
- 如果你用FCM，对应三个需要监听的场景：
- 应用前台运行时收到消息：
FirebaseMessaging.onMessage.listen((RemoteMessage message) { ... }) - 应用后台运行时点击通知唤起应用：
FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) { ... }) - 应用完全杀死后点击通知冷启动：调用
FirebaseMessaging.instance.getInitialMessage()获取初始携带的通知
- 应用前台运行时收到消息：
- 如果你用OneSignal，对应监听
setNotificationWillShowInForegroundHandler、setNotificationOpenedHandler两个回调即可 - 如果你用本地通知插件
flutter_local_notifications，可以在触发通知的代码处同步存入数据，也可以监听通知点击回调补存数据
你需要从回调返回的payload中提取你需要的字段，统一封装为你自己的通知数据模型，至少包含：唯一通知ID、标题、正文、图片链接（可选）、推送时间、跳转参数（可选）、已读状态。
2. 本地持久化存储通知
根据你的业务复杂度选择存储方案即可：
- 轻量场景（通知条数<1000、仅存文本和链接）：用
shared_preferences，把通知列表序列化为JSON数组存储即可 - 复杂场景（需要支持已读/未读筛选、离线图片查看、多条件检索）：用
isar或sqflite本地数据库，新建通知表，把通知模型的字段作为表字段存储，以推送SDK返回的唯一通知ID作为主键避免重复存储
如果需要支持离线查看通知附带的图片，可以在收到通知时用flutter_cache_manager预下载图片到本地，把本地存储路径存入数据库，渲染时优先读取本地缓存。
3. 实现应用内通知页逻辑
页面开发没有特殊要求，按普通列表页实现即可：
- 页面初始化时从本地存储拉取全量通知，按推送时间倒序排列
- 列表项按设计稿渲染标题、正文、图片，未读通知可加高亮标识
- 点击通知时更新本地存储的已读状态，按需跳转到对应的业务页面
如果需要多设备同步通知状态，可以在用户登录时从你的业务服务端拉取全量通知列表覆盖本地数据，用户操作通知（标记已读、删除）时同步上报状态到服务端即可。
内容的提问来源于stack exchange，提问作者Max Moe
相关产品推荐
相关产品推荐
