Flutter通知管理插件masamune_notification_firebase的使用

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

Masamune logo

Masamune Notification

Follow on Twitter Follow on Threads Maintained with Melos

GitHub Sponsor


[GitHub] | [YouTube] | [Packages] | [Twitter] | [Threads] | [LinkedIn] | [mathru.net]


Plug-in packages that add functionality to the Masamune Framework.

For more information about Masamune Framework, please click here.

https://pub.dev/packages/masamune

GitHub Sponsors #

Sponsors are always welcome. Thank you for your support!

使用 Flutter 通知管理插件 masamune_notification_firebase

本指南将帮助您了解如何在 Flutter 应用程序中使用 masamune_notification_firebase 插件来管理通知。

步骤 1: 添加依赖

首先,在您的 pubspec.yaml 文件中添加 masamune_notification_firebase 依赖:

dependencies:
  masamune_notification_firebase: ^1.0.0

然后运行 flutter pub get 来获取新的依赖项。

步骤 2: 初始化 Firebase

确保已经在项目中初始化了 Firebase。如果尚未初始化,请按照以下步骤操作:

import 'package:firebase_core/firebase_core.dart';

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

步骤 3: 配置通知服务

main.dart 中配置 masamune_notification_firebase

import 'package:flutter/material.dart';
import 'package:masamune_flutter/masamune.dart';
import 'package:masamune_notification_firebase/masamune_notification_firebase.dart';

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

  // 初始化 Masamune 和通知服务
  Masamune.init(
    notificationService: FirebaseNotificationService(),
  );

  runApp(MyApp());
}

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

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

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

步骤 4: 处理通知

您可以使用 FirebaseNotificationService 来处理通知事件。例如,当接收到通知时,您可以执行某些操作:

import 'package:masamune_notification_firebase/masamune_notification_firebase.dart';

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  @override
  void initState() {
    super.initState();
    // 监听通知事件
    FirebaseNotificationService.instance.onNotification.listen((event) {
      print("Received notification: ${event.data}");
    });
  }

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

通过以上步骤,您可以在 Flutter 应用程序中使用 masamune_notification_firebase 插件来管理和处理通知。


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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用masamune_notification_firebase插件来进行Firebase通知管理的示例代码。这个插件可以让你轻松地处理Firebase Cloud Messaging(FCM)的通知。

1. 添加依赖

首先,在你的pubspec.yaml文件中添加masamune_notification_firebase依赖:

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

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

2. 配置Firebase

确保你已经在Firebase控制台中为你的应用创建了项目,并下载了google-services.json文件,将其放置在你的android/app/目录下。

对于iOS,你需要将下载的GoogleService-Info.plist文件放置在你的ios/Runner/目录下,并在Xcode中配置相关设置。

3. 初始化Firebase和通知插件

在你的Flutter应用的主入口文件(通常是main.dart)中,初始化Firebase和通知插件:

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

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

  // 初始化Firebase应用
  await Firebase.initializeApp();

  // 初始化通知插件
  await MasamuneNotificationFirebase.initialize(
    android: AndroidNotificationOptions(
      channelId: 'high_importance_channel',
      channelName: 'High Importance Notifications',
      channelDescription: 'This channel is used for important notifications.',
      importance: NotificationImportance.high,
    ),
    ios: IOSNotificationOptions(
      presentAlert: true,
      playSound: true,
      badge: true,
    ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Firebase Notification Example'),
        ),
        body: Center(
          child: Text('Check your device notifications for test messages.'),
        ),
      ),
    );
  }
}

4. 处理通知点击事件

你可以通过监听MasamuneNotificationFirebase.onMessageOpenedApp流来处理用户点击通知后打开应用的事件:

@override
void initState() {
  super.initState();

  // 监听通知点击事件
  MasamuneNotificationFirebase.onMessageOpenedApp.listen((RemoteMessage message) {
    // 处理点击通知后的逻辑
    print('Notification clicked: ${message.data}');
  });
}

5. 发送测试通知

为了测试,你可以在Firebase控制台中发送一个测试通知,或者使用以下代码在应用中发送本地通知:

void sendLocalNotification() async {
  await MasamuneNotificationFirebase.displayNotification(
    title: 'Hello',
    body: 'This is a test notification!',
    data: {'key': 'value'},
  );
}

你可以在应用的某个按钮点击事件中调用sendLocalNotification函数来发送本地通知。

完整示例

结合以上所有步骤,你的main.dart文件可能看起来像这样:

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

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

  await Firebase.initializeApp();

  await MasamuneNotificationFirebase.initialize(
    android: AndroidNotificationOptions(
      channelId: 'high_importance_channel',
      channelName: 'High Importance Notifications',
      channelDescription: 'This channel is used for important notifications.',
      importance: NotificationImportance.high,
    ),
    ios: IOSNotificationOptions(
      presentAlert: true,
      playSound: true,
      badge: true,
    ),
  );

  FirebaseMessaging.onMessage.listen((RemoteMessage message) {
    print('A new FCM message arrived!');
    print('Message data: ${message.data}');
  });

  FirebaseMessaging.onMessageOpenedApp.listen((RemoteMessage message) {
    print('A message was opened while the app was in the background!');
    print('Message data: ${message.data}');
  });

  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();

    MasamuneNotificationFirebase.onMessageOpenedApp.listen((RemoteMessage message) {
      print('Notification clicked: ${message.data}');
    });
  }

  void sendLocalNotification() async {
    await MasamuneNotificationFirebase.displayNotification(
      title: 'Hello',
      body: 'This is a test notification!',
      data: {'key': 'value'},
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Firebase Notification Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Check your device notifications for test messages.'),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: sendLocalNotification,
                child: Text('Send Local Notification'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何初始化Firebase和通知插件,监听通知事件,并发送本地通知。希望这对你有所帮助!

回到顶部