带有操作按钮和图像的 Flutter 本地通知

Question

我想用 firebase 消息推送此类通知。现在我正在使用 https://pub.dev/packages/flutter_local_notifications 这个包的普通通知。但我没有看到有办法添加操作按钮。我想在 45 秒后或通过另一条 Firebase 消息删除此通知。我也在为 android 和 ios 开发这个应用程序。如果我的问题不清楚或需要更多信息，请随时发表评论。

我在 Stackoverflow 上看到了类似的问题。

• 带有操作按钮的 Flutter 本地通知
• 带有操作按钮的通知

Answer 1

flutter_local_notification 尚未支持此ticket 中提到的通知操作按钮。您可能需要考虑同时使用 awesome_notifications 插件，因为它支持通知按钮。

要使用操作按钮显示通知，只需使用

void _showNotificationWithButton() {
  AwesomeNotifications().createNotification(
    content: NotificationContent(
        id: 10,
        channelKey: 'basic_channel',
        title: 'Simple Notification',
        body: 'Simple body'),
    actionButtons: <NotificationActionButton>[
      NotificationActionButton(key: 'yes', label: 'Yes'),
      NotificationActionButton(key: 'no', label: 'No'),
    ],
  );
}

然后，您可以通过在NotificationActionButton 上添加icon 属性来添加操作按钮的图标。图标应该是资源中映射的图像的字符串资源。

要监听操作按钮的按下，请使用 actionStream 监听器。您可以将其添加到屏幕的

initState()

AwesomeNotifications().actionStream.listen((receivedNotification) {
  // prints the key of the NotificationActionButton pressed
  debugPrint('Notification key pressed: ${receivedNotification.buttonKeyPressed}');
});

Answer 2

答案由两部分组成：

1. 创建抬头通知。
2. 在通知中显示操作按钮。

---

1 ** 创建抬头通知

我们将使用这个包awesome_notifications。

这是如何在项目的

main()

方法中初始化它

AwesomeNotifications().initialize(
  // set the icon to null if you want to use the default app icon
  null,
  [
    NotificationChannel(
      channelGroupKey: 'channel_group_key',
      channelKey: 'channel_key',
      channelName: 'channel_name',
      channelDescription: 'channel_description',
      importance: NotificationImportance.Max,
    )
  ],
  debug: true,
);

仅限 Android 初始化：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example">

  <uses-permission android:name="android.permission.USE_FULL_SCREEN_INTENT" />
  <application>
    ...
     <activity
       android:name=".MainActivity"
       android:showOnLockScreen="true"
       android:showWhenLocked="true"
       android:turnScreenOn="true">
       ...
     </activity>
   ...
  </application>
</manifest>

注意： 在 iOS 上，您需要请求通知权限。而在 Android 11 上，您需要请求

fullScreenIntent

。这是代码（将其放入

initState()

或其他位置）：

AwesomeNotifications().isNotificationAllowed().then(
  (isAllowed) {
    //It would be more appropriate if you can show your own dialog
    //to the user before requesting the notifications permissons.
    if (!isAllowed) {
      AwesomeNotifications().requestPermissionToSendNotifications(
        permissions: [
          NotificationPermission.Alert,
          NotificationPermission.Sound,
          NotificationPermission.Badge,
          NotificationPermission.Vibration,
          NotificationPermission.Light,
          NotificationPermission.FullScreenIntent,
        ],
      );
    }
  }
);

以及如何创建通知，在需要触发通知时放置它：

AwesomeNotifications().createNotification(
  content: NotificationContent(
    id: 10,
    channelKey: 'channel key' //Same as above in initilize,
    title: title,
    body: body,
    wakeUpScreen: true,
    fullScreenIntent: true,
    criticalAlert: true,
    //Other parameters
  ),
);

---

2 ** 在通知中显示操作按钮

在前面的代码片段中，创建通知时，您可以向其中添加操作按钮，如下所示：

AwesomeNotifications().createNotification(
  //...
  actionButtons: <NotificationActionButton>[
    NotificationActionButton(key: 'accept', label: 'Accept'),
    NotificationActionButton(key: 'reject', label: 'Reject'),
  ],
);

您可以添加图标、文本字段和许多其他内容。请查看此处了解更多信息。

要监听点击的按钮，代码如下：

AwesomeNotifications().actionStream.listen(
  (ReceivedAction receivedAction) {

  if (receivedAction.buttonKeyPressed == 'accept') {
    //Your code goes here
  } else if (receivedAction.buttonKeyPressed == 'reject') {
    //Your code goes here
  }

  //Here if the user clicks on the notification itself
  //without any button

  },
);

---

awesome_notifications 包非常广泛，我建议您从他们的页面了解更多信息。