FirebaseMessaging.onMessage.listen前台不显示通知但函数日志正常

Firebase Messaging 在应用处于前台时，不会自动在系统通知栏展示推送通知，需要结合本地通知插件手动实现，具体步骤如下：

1. 添加本地通知依赖 #

在 pubspec.yaml 的 dependencies 中添加 flutter_local_notifications：

dependencies:
  flutter:
    sdk: flutter
  firebase_messaging: ^x.x.x # 保留你当前使用的版本
  flutter_local_notifications: ^x.x.x # 替换为最新稳定版

执行 flutter pub get 完成依赖安装。

2. 初始化本地通知服务 #

在 main() 函数中初始化本地通知实例，并配置平台参数：

import 'package:flutter_local_notifications/flutter_local_notifications.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app_badger/flutter_app_badger.dart';

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();

  // 配置Android初始化参数
  const AndroidInitializationSettings androidInitSettings =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  // 配置iOS初始化参数
  const DarwinInitializationSettings iosInitSettings = DarwinInitializationSettings(
    requestAlertPermission: true,
    requestBadgePermission: true,
    requestSoundPermission: true,
  );
  const InitializationSettings initSettings = InitializationSettings(
    android: androidInitSettings,
    iOS: iosInitSettings,
  );
  await flutterLocalNotificationsPlugin.initialize(initSettings);

  // 原有Firebase消息监听逻辑，新增通知展示代码
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('Got a message whilst in the foreground!');
    print('Message data: ${message.data}');

    if (message.notification != null) {
      print('Message also contained a notification: ${message.notification}');
      // 调用方法展示本地通知
      _showForegroundNotification(message.notification!);
    }
    FlutterAppBadger.updateBadgeCount(1);
  });

  runApp(const MyApp());
}

// 定义前台展示通知的方法
void _showForegroundNotification(RemoteNotification notification) async {
  const AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
    'foreground_notification_channel', // 自定义渠道ID
    '前台推送通知', // 自定义渠道名称
    channelDescription: '用于展示应用前台时的推送通知', // 自定义渠道描述
    importance: Importance.max,
    priority: Priority.high,
  );
  const NotificationDetails notificationDetails =
      NotificationDetails(android: androidDetails);
  
  await flutterLocalNotificationsPlugin.show(
    DateTime.now().millisecondsSinceEpoch, // 唯一通知ID
    notification.title,
    notification.body,
    notificationDetails,
  );
}

3. 补充平台配置 #

Android端 #

• 确保应用有通知图标，将图标文件放在 android/app/src/main/res/mipmap-xxxhdpi/ 目录下，对应初始化代码中的 @mipmap/ic_launcher。
• Android 8.0及以上系统会自动通过代码创建通知渠道，无需额外手动配置。

iOS端 #

在 ios/Runner/Info.plist 中添加权限申请描述：

<key>NSNotificationAlertUsageDescription</key>
<string>需要通知权限接收推送消息</string>
<key>NSNotificationBadgeUsageDescription</key>
<string>需要角标权限显示未读消息数量</string>
<key>NSNotificationSoundUsageDescription</key>
<string>需要声音权限提醒新消息</string>

关键说明 #

• Firebase Messaging的onMessage回调仅负责接收消息数据，不会自动触发系统通知栏展示，必须通过本地通知插件主动构建并弹出通知。
• 注意保持flutter_local_notifications与firebase_messaging的版本兼容性，避免依赖冲突。

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