正文

轻松上手：Flutter集成FCM实现即时推送通知全攻略

/0 浏览量
1015

在Flutter应用中集成Firebase Cloud Messaging（FCM）可以让你轻松实现即时推送通知功能。本文将为你详细介绍如何在Flutter应用中集成FCM，并实现发送和接收推送通知。

一、准备工作

在开始之前，请确保你已经：

  1. 安装了Flutter SDK和Dart环境。
  2. 创建了一个Flutter项目。
  3. 在Firebase控制台创建了一个新的项目，并获取了API密钥。

二、集成FCM

1. 添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  firebase_core: latest_version
  firebase_messaging: latest_version

2. 初始化FCM

在main.dart文件中，添加以下代码来初始化FCM：

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_messaging/firebase_messaging.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

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

3. 注册FCM监听器

在MyHomePage类中，添加以下代码来注册FCM监听器：

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FirebaseMessaging messaging;

  @override
  void initState() {
    super.initState();
    messaging = FirebaseMessaging.instance;
    messaging.getToken().then((token) {
      print('FCM Token: $token');
    });

    FirebaseMessaging.onMessage.listen((RemoteMessage message) {
      print('Message data: ${message.data}');
    });

    FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
      print('A new onMessageOpenedApp event was published!');
      print('Message data: ${message.data}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter FCM Demo'),
      ),
      body: Center(
        child: Text('FCM is working!'),
      ),
    );
  }
}

三、发送推送通知

1. 使用Firebase Console

在Firebase控制台中，选择你的项目，然后点击“云函数” > “创建函数”。创建一个名为sendNotification的函数，并添加以下代码：

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.sendNotification = functions.https.onCall((data, context) => {
  const message = {
    notification: {
      title: data.title,
      body: data.body,
    },
    token: data.token,
  };
  return admin.messaging().send(message);
});

2. 使用API

你也可以使用API来发送推送通知。以下是一个使用Node.js编写的示例：

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.sendNotification = functions.https.onCall((data, context) => {
  const message = {
    notification: {
      title: data.title,
      body: data.body,
    },
    token: data.token,
  };
  return admin.messaging().send(message);
});

四、总结

通过以上步骤，你可以在Flutter应用中集成FCM，并实现发送和接收推送通知。希望本文能帮助你轻松上手Flutter集成FCM实现即时推送通知。

-- 展开阅读全文 --