Flutter推送通知插件wonderpush_fcm_flutter的使用

Flutter推送通知插件wonderpush_fcm_flutter的使用

插件介绍

WonderPush Flutter SDK - FCM兼容模块用于与WonderPush服务一起提供移动推送通知交付。此插件添加了FCM兼容性，需要与wonderpush_flutter插件一起使用。

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isConnected = false;

  void _checkConnection() async {
    try {
      await wonderpush_flutter.connect();
      setState(() {
        _isConnected = true;
      });
    } catch (e) {
      print('连接失败: $e');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter WonderPush FCM Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '当前连接状态: $_isConnected',
              style: TextStyle(fontSize: 24.0),
            ),
            ElevatedButton(
              onPressed: _checkConnection,
              child: Text('检查连接'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用wonderpush_fcm_flutter插件来实现推送通知的示例代码。这个插件结合了WonderPush和Firebase Cloud Messaging (FCM)服务来实现推送通知功能。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加wonderpush_fcm_flutter依赖：

dependencies:
  flutter:
    sdk: flutter
  wonderpush_fcm_flutter: ^最新版本号  # 请替换为实际的最新版本号

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

2. 配置Firebase

在Firebase控制台中创建一个新的项目，并下载google-services.json文件。将这个文件放在你的android/app/目录下。

3. 配置Android项目

在android/app/build.gradle文件中，确保应用级别Gradle文件包含以下配置：

android {
    ...
    defaultConfig {
        ...
        applicationId "com.example.yourapp"  // 你的应用ID
        ...
        // 添加Firebase配置
        minSdkVersion 16
        targetSdkVersion 30
        versionCode 1
        versionName "1.0"
    }
    ...
}

// 在文件底部添加以下配置
apply plugin: 'com.google.gms.google-services'

在android/build.gradle文件的buildscript部分，确保包含Google服务的类路径依赖：

buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:4.1.0'
        classpath 'com.google.gms:google-services:4.3.8'  // 请使用最新版本
    }
}

4. 初始化WonderPush

在你的main.dart文件中，初始化WonderPush并配置推送通知：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化WonderPush
  await WonderPushFCMFlutter.initialize(
    projectId: 'YOUR_WONDERPUSH_PROJECT_ID',  // 替换为你的WonderPush项目ID
    clientKey: 'YOUR_WONDERPUSH_CLIENT_KEY',  // 替换为你的WonderPush客户端密钥
  );

  // 监听推送通知点击事件
  WonderPushFCMFlutter.onMessageOpenedApp.listen((Map<String, dynamic> message) {
    // 处理通知点击事件
    print('Notification clicked: $message');
  });

  // 处理接收到的前台通知
  WonderPushFCMFlutter.onMessage.listen((RemoteMessage message) {
    // 显示本地通知或其他处理
    print('Foreground message: ${message.notification?.body}');
  });

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('WonderPush FCM Flutter Example'),
        ),
        body: Center(
          child: Text('Check your device for notifications!'),
        ),
      ),
    );
  }
}

5. 处理后台消息（可选）

如果你需要在后台处理消息，可以在AndroidManifest.xml中声明一个FirebaseMessagingService，并创建一个Dart文件来处理后台消息。不过，wonderpush_fcm_flutter插件已经封装了很多细节，通常不需要手动处理后台消息。

6. 测试推送通知

在WonderPush仪表盘中，你可以发送测试推送通知到你的设备，确保一切配置正确，并且设备能够接收到通知。

注意

  • 确保你的设备已经注册到Firebase，并且网络连接正常。
  • 在实际发布应用之前，请仔细检查Firebase和WonderPush的配置。
  • 根据需要调整通知的显示和处理逻辑。

以上就是在Flutter项目中使用wonderpush_fcm_flutter插件实现推送通知的完整示例代码。

回到顶部