如何创建Flutter local notification自定义布局并实现指定UI效果

前置依赖 #

在pubspec.yaml中添加本地通知依赖：

dependencies:
  flutter_local_notifications: ^16.1.0

Android端实现（自定义布局核心适配端，iOS需单独配置扩展） #

1. 新增自定义布局XML文件 #

在android/app/src/main/res/layout目录下新建custom_notification.xml，对应目标UI的布局代码示例：

<?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="@android:color/white">

    <ImageView
        android:id="@+id/noti_icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/ic_launcher"/>

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

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

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

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_marginTop="8dp">

            <Button
                android:id="@+id/btn_confirm"
                android:layout_width="wrap_content"
                android:layout_height="32dp"
                android:text="确认"
                android:backgroundTint="@color/teal_200"/>

            <Button
                android:id="@+id/btn_cancel"
                android:layout_width="wrap_content"
                android:layout_height="32dp"
                android:text="取消"
                android:layout_marginStart="8dp"
                android:backgroundTint="@color/gray"/>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

2. 初始化通知插件并创建专属渠道 #

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin = FlutterLocalNotificationsPlugin();

const AndroidInitializationSettings initializationSettingsAndroid = AndroidInitializationSettings('@mipmap/ic_launcher');
const InitializationSettings initializationSettings = InitializationSettings(android: initializationSettingsAndroid);

await flutterLocalNotificationsPlugin.initialize(initializationSettings);

// 注册高优先级通知渠道，Android 8.0及以上必须配置
const AndroidNotificationChannel channel = AndroidNotificationChannel(
  'custom_noti_channel',
  '自定义通知',
  description: '用于展示自定义布局的通知',
  importance: Importance.max,
);
await flutterLocalNotificationsPlugin.resolvePlatformSpecificImplementation<AndroidFlutterLocalNotificationsPlugin>()?.createNotificationChannel(channel);

3. 触发自定义布局通知 #

调用通知时指定自定义布局和对应控件的赋值：

final AndroidNotificationDetails androidDetails = AndroidNotificationDetails(
  'custom_noti_channel',
  '自定义通知',
  channelDescription: '用于展示自定义布局的通知',
  priority: Priority.high,
  importance: Importance.max,
  customLayout: CustomNotificationLayout(
    content: 'custom_notification',
    values: {
      'noti_title': '你有一条待办提醒',
      'noti_content': '请确认今日的工作任务是否已完成',
    },
  ),
);

final NotificationDetails details = NotificationDetails(android: androidDetails);
await flutterLocalNotificationsPlugin.show(
  100, // 通知ID
  null, // 自定义布局不需要默认标题
  null, // 自定义布局不需要默认内容
  details,
);

注意事项 #

• 自定义布局内的按钮点击事件需要在Android原生层注册广播接收器监听，也可以通过MethodChannel将点击事件回传到Flutter层处理
• Android 12及以上版本对自定义通知布局的控件样式有限制，建议使用基础原生控件避免异常渲染
• iOS端自定义通知需要在Xcode中新增Notification Content Extension Target，单独编写Swift/OC布局代码，无法直接复用Flutter层布局

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