Flutter Laravel通知集成插件laravel_notify_fcm的使用
Flutter Laravel通知集成插件 laravel_notify_fcm
的使用
Laravel Notify Fcm 是一个用于通过 Laravel FCM 向你的 Flutter 应用发送通知的包。以下是如何在项目中集成和使用这个插件的详细步骤。
开始前的准备
安装
首先,在你的 pubspec.yaml
文件中添加依赖:
dependencies:
laravel_notify_fcm: ^2.0.0
或者,你也可以直接使用 Dart 命令行工具来添加依赖:
dart pub add laravel_notify_fcm
要求
使用方法
首先,导入 laravel_notify_fcm
包:
import 'package:laravel_notify_fcm/laravel_notify_fcm.dart';
将设备添加到数据库
调用 init
方法初始化包:
FirebaseMessaging firebaseMessaging = FirebaseMessaging.instance;
await LaravelNotifyFcm.instance.init(
url: 'https://example.com/api/fcm/devices',
firebaseMessaging: firebaseMessaging,
debugMode: true, // 可选,默认为 false
);
参数说明:
url
: 指向你的 Laravel 应用程序的 URL,用于发送设备令牌。firebaseMessaging
: FirebaseMessaging 实例。debugMode
: 是否启用调试模式,默认值为false
。
然后,调用 storeFcmDevice
方法将设备添加到数据库:
await LaravelNotifyFcm.storeFcmDevice(
sanctumToken: '从你的 Laravel 用户获取的 Sanctum Token',
);
此方法会请求权限以向设备发送通知。如果用户接受,设备将会被添加到数据库中。
示例应用
以下是一个完整的示例应用,展示了如何在 Flutter 中使用 laravel_notify_fcm
:
import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:flutter/material.dart';
import 'package:laravel_notify_fcm/laravel_notify_fcm.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
FirebaseMessaging firebaseMessaging = FirebaseMessaging.instance;
LaravelNotifyFcm.instance.init(
firebaseMessaging: firebaseMessaging,
url: "https://example.com/api/fcm",
debugMode: true,
);
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Laravel Notify FCM',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Laravel Notify Fcm")),
body: SafeArea(
child: Container(
child: InkWell(
child: Text("Enable notifications"),
onTap: () async {
// 获取你的 Laravel 应用中的 Sanctum Token
await LaravelNotifyFcm.storeFcmDevice(
sanctumToken: 'sanctumToken');
},
),
),
),
);
}
}
更多信息
希望这些信息能帮助你成功集成和使用 laravel_notify_fcm
插件!如果你有任何问题或需要进一步的帮助,请随时联系我。
更多关于Flutter Laravel通知集成插件laravel_notify_fcm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter Laravel通知集成插件laravel_notify_fcm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter应用中集成并使用laravel_notify_fcm
插件来实现Laravel后端与Flutter前端之间的通知功能的代码案例。
前提条件
- Laravel 后端:确保你已经安装并配置了Laravel,以及Firebase Cloud Messaging (FCM)。
- Flutter 前端:确保你已经安装了Flutter和Dart环境。
步骤一:在Laravel后端配置FCM
-
安装依赖:
composer require laravel-notification-channels/fcm
-
配置Firebase服务账户密钥:
将你的Firebase服务账户密钥(
serviceAccountKey.json
)放在Laravel项目的根目录或config
目录下,并在.env
文件中添加以下配置:FCM_SERVICE_ACCOUNT=path/to/your/serviceAccountKey.json FCM_PROJECT_ID=your-firebase-project-id
-
创建FCM通知类(可选,但推荐):
在
app/Notifications
目录下创建一个新的通知类,例如UserNotification.php
:<?php namespace App\Notifications; use Illuminate\Bus\Queueable; use Illuminate\Contracts\Queue\ShouldQueue; use Illuminate\Notifications\Messages\MailMessage; use Illuminate\Notifications\Notification; use Kreait\Firebase\Messaging\CloudMessage; use NotificationChannels\Fcm\FcmChannel; use NotificationChannels\Fcm\FcmMessage; class UserNotification extends Notification implements ShouldQueue { use Queueable; protected $data; public function __construct($data) { $this->data = $data; } public function via($notifiable) { return [FcmChannel::class]; } public function toFcm($notifiable) { return FcmMessage::create() ->setData([ 'title' => $this->data['title'], 'body' => $this->data['body'], 'click_action' => 'FLUTTER_NOTIFICATION_CLICK' ]); } }
-
发送通知:
在你的控制器或任何需要发送通知的地方使用
notify
方法:use App\Models\User; use App\Notifications\UserNotification; $user = User::find(1); $data = [ 'title' => 'Hello', 'body' => 'This is a test notification' ]; $user->notify(new UserNotification($data));
步骤二:在Flutter前端集成FCM和laravel_notify_fcm
-
添加依赖:
在
pubspec.yaml
文件中添加以下依赖:dependencies: flutter: sdk: flutter firebase_core: ^1.0.0 # 确保版本是最新的 firebase_messaging: ^10.0.0 # 确保版本是最新的 laravel_notify_fcm: ^latest_version # 使用最新版本
-
配置Firebase:
按照Firebase的官方文档配置你的Flutter项目,获取
google-services.json
文件并放置在android/app/
目录下。 -
初始化Firebase和FCM:
在你的Flutter应用的入口文件(通常是
main.dart
)中初始化Firebase和FCM:import 'package:flutter/material.dart'; import 'package:firebase_core/firebase_core.dart'; import 'package:firebase_messaging/firebase_messaging.dart'; import 'package:laravel_notify_fcm/laravel_notify_fcm.dart'; void main() async { WidgetsFlutterBinding.ensureInitialized(); await Firebase.initializeApp(); FirebaseMessaging.instance.configure( onMessage: (RemoteMessage message) async { // 处理接收到的消息 print('A new FCM message arrived!'); print('Message data: ${message.data}'); }, onBackgroundMessage: myBackgroundMessageHandler, onLaunch: (RemoteMessage message) async { // 处理应用从后台打开时的消息 }, onResume: (RemoteMessage message) async { // 处理应用从终止状态恢复时的消息 }, ); runApp(MyApp()); } Future<void> myBackgroundMessageHandler(RemoteMessage message) async { // 在后台处理消息 print('Handling a background message: ${message.data}'); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo Home Page'), ), body: Center( child: Text('Hello, Flutter with Laravel FCM!'), ), ); } }
-
订阅主题或特定通知(如果需要):
你可以根据Laravel后端发送通知时指定的主题或数据来订阅特定的通知。
这样,你的Flutter应用应该能够成功接收来自Laravel后端通过FCM发送的通知。确保在开发和测试时,Firebase项目配置正确,并且FCM服务正常运作。