Flutter推送通知UI插件notificare_push_ui的使用

Flutter推送通知UI插件notificare_push_ui的使用

Notificare Flutter SDK

GitHub release License

Notificare Flutter SDK 可以快速且轻松地与许多 Notificare API 服务进行通信，并使您可以无缝集成各种功能，从推送通知到上下文存储。

通过我们的 📚集成指南 和 示例项目 开始使用。

目录

功能

  • 推送通知：接收推送通知并自动跟踪其参与度。
  • 推送通知UI：使用原生屏幕和元素来显示您的推送通知，并且可以零成本处理其操作。
  • 应用内消息：自动向您的用户展示相关应用内内容，无需任何努力。
  • 收件箱：内置消息收件箱的应用程序由于其性质（可以多次打开的消息）而具有更高的转化率。该SDK为您提供构建收件箱UI所需的所有工具。
  • 地理定位：将用户的位置转化为相关信息，自动化基于位置行为的用户分段，并创建真正上下文的通知。
  • 忠诚度：利用数字卡的力量，这些卡不仅存在于您的应用程序中，而且始终在客户口袋里。
  • 资产：为您的应用程序添加强大的上下文营销功能。在正确的时间或地点向正确的用户展示正确的内容。最大化您已经创建的内容，而不增加开发成本。
  • 可扫描对象：通过扫描NFC标签或二维码解锁新内容，这些内容可以无缝集成到您的移动应用中。

安装

需求

  • Android 6 (API 级别 23) 及以上
  • iOS 11 及以上

配置

在 pubspec.yaml 文件中添加 Flutter 包并遵循入门指南。

dependencies:
  # 必需
  notificare: ^4.0.0

  # 可选模块
  notificare_assets: ^4.0.0
  notificare_geo: ^4.0.0
  notificare_inbox: ^4.0.0
  notificare_loyalty: ^4.0.0
  notificare_push: ^4.0.0
  notificare_push_ui: ^4.0.0
  notificare_scannables: ^4.0.0

开始使用

集成

通过我们的 📚集成指南 和 示例项目 开始使用。

示例

  • 示例项目 示例项目 以简化的方式展示了其他集成，以便快速了解如何实现特定功能。

完整示例代码

以下是一个完整的示例，演示如何在 Flutter 应用中使用 notificare_push_ui 插件。

首先，在 pubspec.yaml 中添加 notificare_push_ui 依赖：

dependencies:
  notificare_push_ui: ^4.0.0

然后在 Dart 文件中初始化和使用 notificare_push_ui：

import 'package:flutter/material.dart';
import 'package:notificare_push_ui/notificare_push_ui.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Notificare Push UI Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 初始化 Notificare Push UI
              NotificarePushUI.init();
              
              // 检查推送权限
              if (!NotificarePushUI.isPermissionGranted()) {
                NotificarePushUI.requestPermission();
              }

              // 显示通知
              NotificarePushUI.showNotification({
                "title": "Hello",
                "body": "This is a test notification."
              });
            },
            child: Text('Show Notification'),
          ),
        ),
      ),
    );
  }
}

更多关于Flutter推送通知UI插件notificare_push_ui的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter推送通知UI插件notificare_push_ui的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


notificare_push_ui 是 Notificare 提供的一个 Flutter 插件，用于在应用程序中处理推送通知的 UI 展示。通过这个插件，你可以轻松地在 Flutter 应用中显示推送通知的弹出窗口、横幅、以及处理用户交互。

1. 安装插件

首先，你需要在 pubspec.yaml 文件中添加 notificare_push_ui 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  notificare_push_ui: ^3.0.0 # 请根据实际情况选择最新版本

然后运行 flutter pub get 来安装插件。

2. 初始化插件

在 main.dart 文件中初始化 NotificarePushUI 插件。通常，你需要在 main() 函数中进行初始化：

import 'package:flutter/material.dart';
import 'package:notificare_push_ui/notificare_push_ui.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize Notificare Push UI
  await NotificarePushUI.initialize();
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

3. 显示推送通知

notificare_push_ui 插件会自动处理接收到的推送通知，并在屏幕上显示一个通知弹出窗口。你不需要手动调用显示通知的方法，插件会根据系统的推送通知自动处理。

4. 自定义通知 UI

如果你想自定义通知的 UI，可以通过 NotificarePushUI 提供的回调方法来实现。例如，你可以监听通知的点击事件，并根据需要处理用户交互：

import 'package:flutter/material.dart';
import 'package:notificare_push_ui/notificare_push_ui.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  
  // Initialize Notificare Push UI
  await NotificarePushUI.initialize();
  
  // Listen for notification tapped events
  NotificarePushUI.onNotificationOpened.listen((notification) {
    // Handle notification tapped event
    print('Notification tapped: ${notification.title}');
  });
  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
回到顶部