如何使用Flutter创建可显示在通知栏的自定义Widget

首先要明确：Flutter本身无法直接渲染Widget到系统通知面板，因为系统通知属于原生系统层级，需要通过Flutter与原生平台的交互或者借助成熟的三方开发包来实现自定义布局的通知。

直接实现方案（基于flutter_local_notifications） #

目前最常用的是flutter_local_notifications包，它支持Android和iOS的自定义通知布局，步骤如下：

1. 配置依赖 #

在pubspec.yaml中添加依赖：

dependencies:
  flutter_local_notifications: ^16.1.0

2. Android端自定义布局准备 #

在Android项目的res/layout目录下创建自定义通知布局文件（比如custom_notification_layout.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="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:scaleType="centerCrop"/>

    <TextView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="14sp"
        android:layout_marginTop="8dp"/>
</LinearLayout>

3. Flutter端代码实现 #

初始化通知插件，然后构建自定义通知：

import 'package:flutter_local_notifications/flutter_local_notifications.dart';

final FlutterLocalNotificationsPlugin flutterLocalNotificationsPlugin =
    FlutterLocalNotificationsPlugin();

// 初始化通知插件
Future<void> initNotifications() async {
  const AndroidInitializationSettings initializationSettingsAndroid =
      AndroidInitializationSettings('@mipmap/ic_launcher');
  const InitializationSettings initializationSettings =
      InitializationSettings(android: initializationSettingsAndroid);
  await flutterLocalNotificationsPlugin.initialize(initializationSettings);
}

// 显示自定义布局通知
Future<void> showCustomNotification() async {
  // 使用自定义RemoteViews布局（需对应Android端的布局文件）
  final RemoteViews customLayout = RemoteViews(
    'com.your.package.name', // 替换成你的应用包名
    'custom_notification_layout' // 对应res/layout下的布局文件名
  );
  // 给布局控件赋值
  customLayout.setTextViewText('title', '自定义通知标题');
  customLayout.setTextViewText('content', '这是自定义布局的通知内容');
  customLayout.setImageViewResource('image', '@drawable/notification_img');

  const AndroidNotificationDetails androidNotificationDetails =
      AndroidNotificationDetails(
    'custom_channel_id',
    '自定义通知频道',
    channelDescription: '用于展示自定义布局的通知频道',
    importance: Importance.max,
    priority: Priority.high,
    customContentView: customLayout,
  );
  const NotificationDetails notificationDetails =
      NotificationDetails(android: androidNotificationDetails);
  await flutterLocalNotificationsPlugin.show(
    0,
    '', // 自定义布局已包含标题，这里留空
    '', // 自定义布局已包含内容，这里留空
    notificationDetails,
    payload: 'custom_notification_payload',
  );
}

注意：使用自定义布局前要确保已申请通知权限，且Android端的包名、布局ID与Flutter端代码完全匹配。

推荐开发包 #

• flutter_local_notifications：功能全面，支持Android/iOS基础通知与自定义布局，文档完善，社区活跃，是入门首选。
• awesome_notifications：支持更丰富的交互（比如通知内按钮、进度条），对Android自定义布局的支持更灵活，还提供通知分组、定时触发等高级功能。
• firebase_messaging：如果需要结合远程推送实现自定义通知，可以配合flutter_local_notifications使用，处理推送消息的自定义渲染。

推荐学习资源 #

• Flutter官方文档：查看「本地通知」章节，理解Flutter与原生通知系统的交互逻辑。
• Flutter进阶实战课程：比如极客时间的《Flutter实战进阶》，包含系统的通知模块讲解，覆盖自定义布局实现细节。
• B站免费教程：搜索「Flutter自定义通知」，可以找到开发者分享的实操视频，跟着步骤快速上手。

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