Flutter推送通知插件simple_push_notification的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter推送通知插件simple_push_notification的使用

simple_push_notification 是一个用于处理 Firebase 通知的简单包,支持通知导航。以下是该插件的主要功能和使用方法。

Features

  • 显示推送通知
  • 激活和停用推送通知服务
  • 点击推送通知后导航到指定的屏幕、视图或页面

Getting Started

配置 Firebase

首先确保你的 Flutter 应用已经正确配置了 Firebase。推荐的方法是使用 Flutterfire CLI 来设置 Firebase 应用。可以参考官方文档进行配置。

pubspec.yaml 文件中添加依赖:

dependencies:
  simple_push_notification: latest_version_number

然后导入该包:

import 'package:simple_push_notification/simple_push_notification.dart';

Android 配置

完成 Firebase 配置后,在 lib 文件夹下会生成 firebase_options.dart 文件。接下来需要初始化 Firebase 并使用 SimplePushNotification 类:

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    name: 'NAME_OF_YOUR_FIREBASE_APP',
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(App());
}

初始化完成后,可以根据需求使用 SimplePushNotification 类。

Usage

以下是一个完整的示例代码,展示了如何使用 simple_push_notification 插件:

import 'dart:developer';

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:notification_demo/firebase_options.dart';
import 'package:notification_demo/payloads.dart';
import 'package:simple_push_notification/simple_push_notification.dart';

// Pass this navigatorKey using dependency Injection like get_it package.
final navigatorKey = GlobalKey<NavigatorState>();
late SimplePushNotification pushNotification;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    name: 'Notification_demo',
    options: DefaultFirebaseOptions.currentPlatform,
  );

  pushNotification = SimplePushNotification.initialize(
    navigatorKey: () => navigatorKey,
    getNotificationPayload: (map) => getPayload(map),
    config: NotificationConfig(
      appIcon: 'ic_launcher',
      notificationChannelDescription: 'this is a test description',
      notificationChannelId: 'testId',
      notificationChannelName: 'Test name',
    ),
  );

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      navigatorKey: navigatorKey,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () async {
                await pushNotification.activate(
                  onActivated: (token) {
                    log('Notification activated!!!! token: $token');
                  },
                  onRead: (payload) {
                    log(payload.toString());
                  },
                );
              },
              child: const Text('Activate Push Notification'),
            ),
            ElevatedButton(
              onPressed: () async {
                await pushNotification.deactivate(
                  onDeactivated: (token) {
                    log('Notification deactivated!!!! token: $token');
                  },
                );
              },
              child: const Text('Deactivate Push Notification'),
            ),
          ],
        ),
      ),
    );
  }
}

NotificationPayload getPayload(Map<String, dynamic> data) {
  final type = data['notificationType'] as String;
  switch (type) {
    case 'cart':
      return CartPayload(data['cartId']);
    case 'payment':
      return PaymentPayload(data['paymentId']);
    case 'checkout':
      return CheckoutPayload();
    default:
      return DefaultPayload();
  }
}

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

1 回复

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


当然,以下是如何在Flutter项目中使用simple_push_notification插件来实现推送通知的示例代码。

1. 添加依赖

首先,你需要在pubspec.yaml文件中添加simple_push_notification依赖:

dependencies:
  flutter:
    sdk: flutter
  simple_push_notification: ^latest_version  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 初始化插件

在你的主文件(通常是main.dart)中,你需要初始化SimplePushNotification插件。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  
  // 初始化SimplePushNotification
  SimplePushNotification.initialize(
    onNotificationClicked: (payload) {
      // 用户点击通知时的回调
      print("Notification clicked with payload: $payload");
    },
    onNotificationReceived: (payload) {
      // 接收到通知时的回调
      print("Notification received with payload: $payload");
    },
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Simple Push Notification Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 发送本地通知
              _sendLocalNotification();
            },
            child: Text('Send Notification'),
          ),
        ),
      ),
    );
  }

  void _sendLocalNotification() {
    SimplePushNotification.show(
      title: 'Hello',
      body: 'This is a local notification',
      payload: 'custom_payload', // 自定义数据
    );
  }
}

3. 配置Android权限(如果需要)

对于Android设备,你可能需要在AndroidManifest.xml文件中添加必要的权限,比如INTERNETRECEIVE_BOOT_COMPLETED(如果你的应用需要在设备启动时接收通知)。不过,对于简单的本地通知,通常不需要额外的权限。

4. 发送通知

在上面的示例中,当用户点击按钮时,会调用_sendLocalNotification方法发送一个本地通知。

5. 处理通知点击事件

在初始化SimplePushNotification时,我们提供了onNotificationClickedonNotificationReceived回调。这些回调会在用户点击通知或接收到通知时被调用。

注意事项

  • simple_push_notification插件主要用于本地通知。如果你需要实现远程推送通知(例如通过Firebase Cloud Messaging),你可能需要使用其他插件或结合多个插件来实现。
  • 确保你的应用符合相关的隐私政策和用户通知权限要求,特别是在iOS上,你可能需要在应用的设置中请求用户的通知权限。

以上代码提供了一个基本的框架,展示了如何在Flutter应用中使用simple_push_notification插件来发送和处理本地通知。根据你的具体需求,你可能需要进一步自定义和扩展这些功能。

回到顶部