Flutter应用中为Firebase推送通知创建自定义布局的示例求助

前置依赖 #

首先在pubspec.yaml中添加所需依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^2.15.0
  firebase_messaging: ^14.6.5
  flutter_local_notifications: ^16.1.0

安卓端自定义布局实现 #

1. 在安卓项目路径android/app/src/main/res/layout下创建自定义布局文件custom_notification.xml，示例代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp"
    android:background="@color/white">

    <ImageView
        android:id="@+id/notification_large_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:scaleType="centerCrop"
        android:layout_marginEnd="16dp"/>

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="vertical">

        <TextView
            android:id="@+id/notification_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:textColor="@color/black"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/notification_content"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="14sp"
            android:textColor="@color/dark_gray"
            android:layout_marginTop="4dp"/>

    </LinearLayout>
</LinearLayout>

可根据需求调整布局样式、新增控件，注意控件ID要和后续Flutter侧的配置对应。

iOS端自定义布局实现 #

1. 打开iOS项目的Xcode，新增Notification Content Extension target，用于承载自定义通知布局
2. 在Extension的Info.plist中配置自定义通知的category标识，设置部署版本和主应用保持一致
3. 在Extension的ViewController中编写自定义UI代码，解析FCM推送的payload并填充到对应控件即可。

Flutter侧核心代码 #

import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter_local_notifications/flutter_local_notifications.dart';

// 后台消息处理回调
@pragma('vm:entry-point')
Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
  await Firebase.initializeApp();
  showCustomNotification(message);
}

// 初始化本地通知插件
final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

Future<void> initNotification() async {
  // 平台初始化配置
  const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');
  const DarwinInitializationSettings initializationSettingsIOS = DarwinInitializationSettings();
  const InitializationSettings initializationSettings = InitializationSettings(
    android: initializationSettingsAndroid,
    iOS: initializationSettingsIOS,
  );
  await flutterLocalNotificationsPlugin.initialize(initializationSettings);

  // 创建安卓通知渠道（Android 8.0+必需）
  const AndroidNotificationChannel channel = AndroidNotificationChannel(
    'custom_notification_channel',
    '自定义通知渠道',
    description: '用于展示自定义布局的推送通知',
    importance: Importance.max,
  );
  await flutterLocalNotificationsPlugin
      .resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()
      ?.createNotificationChannel(channel);

  // 监听前台消息
  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    showCustomNotification(message);
  });

  // 监听后台消息点击
  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    // 自定义点击跳转逻辑
  });

  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
}

// 展示自定义布局通知
Future<void> showCustomNotification(RemoteMessage message) async {
  AndroidNotificationDetails androidNotificationDetails = AndroidNotificationDetails(
    'custom_notification_channel',
    '自定义通知渠道',
    channelDescription: '用于展示自定义布局的推送通知',
    importance: Importance.max,
    priority: Priority.high,
    // 绑定自定义布局和控件映射
    customLayout: const AndroidNotificationCustomLayout(
      layoutName: 'custom_notification',
      titleKey: 'notification_title',
      textKey: 'notification_content',
      largeIconKey: 'notification_large_icon',
    ),
  );
  const DarwinNotificationDetails iosNotificationDetails = DarwinNotificationDetails(
    // 对应iOS端配置的自定义通知category标识
    categoryIdentifier: 'CustomNotificationCategory',
  );

  NotificationDetails notificationDetails = NotificationDetails(
    android: androidNotificationDetails,
    iOS: iosNotificationDetails,
  );

  await flutterLocalNotificationsPlugin.show(
    message.hashCode,
    message.notification?.title,
    message.notification?.body,
    notificationDetails,
    payload: message.data.toString(),
  );
}

注意事项 #

• 安卓端自定义布局的控件ID必须和Flutter侧customLayout配置的key完全一致
• iOS端的Extension需要开启推送通知能力，且Bundle ID和主应用属于同一开发者组
• 可根据需求在FCM推送的payload中携带自定义参数，两端解析后填充到自定义布局的对应控件即可

内容的提问来源于stack exchange，提问作者Rashmi Ranjan Sahoo