android - flutter :FCM 计数通知数

Question

我正在尝试在此代码上的应用程序内(在主屏幕中)创建通知徽章，并且我正在使用 Firebase Cloud Messaging 和 android 应用程序以 flutter 语言，问题是我无法弄清楚如何计算收到的通知数量所以
有什么建议的方法来计算从 Firebase 云消息传递到 android 应用程序接收到的通知数量吗？
PS:我现在已经为下面的答案更新了代码，但我仍然遇到错误

// import 'package:flutter/foundation.dart';
// import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:mycafe/main.dart';
import 'Custom_Text.dart';
import 'Pasta.dart';
import 'Burger.dart';
import 'Pizza.dart';
import 'AboutUs.dart';
import 'dart:async';
import 'ui/home/HomeScreen.dart';
import 'dart:math';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'ContactUs.dart';
import 'package:flutter/services.dart';
import 'package:mycafe/model/User.dart';
import 'package:mycafe/ui/home/HomeScreen.dart';
import 'package:mycafe/ui/services/Authenticate.dart';
import 'package:mycafe/ui/utils/helper.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'dart:async';
import 'dart:io';
import 'package:flushbar/flushbar.dart';
import 'package:flushbar/flushbar_helper.dart';
// import 'package:flutter/material.dart';

import 'package:firebase_messaging/firebase_messaging.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

import 'constants.dart' as Constants;
import 'ui/auth/AuthScreen.dart';
import 'ui/onBoarding/OnBoardingScreen.dart';

import 'package:flutter/cupertino.dart';

import 'package:mycafe/ui/auth/AuthScreen.dart';

var bannerItems = ["Burger", "cheesechilly", "Noodles", "Pizza"];
var bannerImages = [
  "images/burger.jpg",
  "images/cheesechilly.jpg",
  "images/noodles.jpg",
  "images/pizza.jpg"
];

ValueNotifier<int> notificationCounterValueNotifer = ValueNotifier(0);

class Notify extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterBase',
      home: Scaffold(
        body: MessageHandler(),
      ),
    );
  }
}

class MessageHandler extends StatefulWidget {
  @override
  _MessageHandlerState createState() => _MessageHandlerState();
}

class _MessageHandlerState extends State<MessageHandler> with ChangeNotifier {
  final Firestore _db = Firestore.instance;
  final FirebaseMessaging _fcm = FirebaseMessaging();

  StreamSubscription iosSubscription;

  @override
  void initState() {
    super.initState();
    if (Platform.isIOS) {
      iosSubscription = _fcm.onIosSettingsRegistered.listen((data) {
        print(data);
        _saveDeviceToken();
      });

      _fcm.requestNotificationPermissions(IosNotificationSettings());
    } else {
      _saveDeviceToken();
    }

// void _incrementCounter() {
    _fcm.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");

        // RaisedButton(
        //   child: Text(message['notification']['title']),
        //   onPressed: () {
        //     Flushbar(
        //       flushbarPosition: FlushbarPosition.TOP,
        //       icon: Icon(
        //         Icons.notifications_active,
        //         color: Colors.white,
        //       ),
        //       mainButton: FlatButton(
        //         onPressed: () {
        //           Navigator.pop(context);
        //           //  Flush.showGoodFlushbar(context, 'login successful!');
        //         },
        //         // child: Text(
        //         //   "ADD",
        //         //   style: TextStyle(color: Colors.amber),
        //         // ),
        //       ),
        //       // duration: Duration(seconds: 7))
        //     ).show(context);
        //   },
        // );
        notificationCounterValueNotifer.value++;
        notificationCounterValueNotifer
            .notifyListeners(); // notify listeners here so ValueListenableBuilder will build the widget.
        final snackbar = SnackBar(
          content: Text(message['notification']['title']),
          action: SnackBarAction(
            label: 'Go',
            onPressed: () => null,
          ),
        );

        Scaffold.of(context).showSnackBar(snackbar);
        // showDialog(
        //   context: context,
        //   builder: (context) => AlertDialog(
        //     content: ListTile(
        //       title: Text(message['notification']['title']),
        //       subtitle: Text(message['notification']['body']),
        //     ),
        //     actions: <Widget>[
        //       FlatButton(
        //         color: Colors.amber,
        //         child: Text('Ok'),
        //         onPressed: () => Navigator.of(context).pop(),
        //       ),
        //     ],
        //   ),
        // );
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
        // TODO optional
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
        // TODO optional
      },
    );
  }

  @override
  void dispose() {
    if (iosSubscription != null) iosSubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // _handleMessages(context);
    return MaterialApp(home: Scaffold(body: HomeApp()));
  }

  /// Get the token, save it to the database for current user
  _saveDeviceToken() async {
    // Get the current user
    String uid = 'jeffd23';
    // FirebaseUser user = await _auth.currentUser();

    // Get the token for this device
    String fcmToken = await _fcm.getToken();

    // Save it to Firestore
    if (fcmToken != null) {
      var tokens = _db
          .collection('users')
          .document(uid)
          .collection('tokens')
          .document(fcmToken);

      await tokens.setData({
        'token': fcmToken,
        'createdAt': FieldValue.serverTimestamp(), // optional
        'platform': Platform.operatingSystem // optional
      });
    }
  }

  /// Subscribe the user to a topic
  _subscribeToTopic() async {
    // Subscribe the user to a topic
    _fcm.subscribeToTopic('puppies');
  }
}

Widget myAppBarIcon() {
  if (State is ValueNotifier) {
    return ValueListenableBuilder(
      builder: (BuildContext context, int newNotificationCounterValue,
          Widget child) {
        // return Container(
        // width: 50,
        // height: 10,

        child:
        Stack(
          children: [
            Icon(
              Icons.notifications,
              color: Colors.white,
              size: 30,
            ),
            Container(
              width: 30,
              height: 30,
              alignment: Alignment.topRight,
              margin: EdgeInsets.only(top: 2),
              child: Container(
                width: 15,
                height: 15,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffc32c37),
                    border: Border.all(color: Colors.white, width: 1)),
                child: Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: Text(
                    newNotificationCounterValue.toString(),
                  ),
                ),
              ),
            ),
          ],
        );

        //return your badge here
      },
      valueListenable: notificationCounterValueNotifer,
    );
    // return Container(
    //   width: 50,
    //   height: 10,
    //   child: Stack(
    //     children: [
    //       Icon(
    //         Icons.notifications,
    //         color: Colors.white,
    //         size: 30,
    //       ),
    //       Container(
    //         width: 30,
    //         height: 30,
    //         alignment: Alignment.topRight,
    //         margin: EdgeInsets.only(top: 2),
    //         child: Container(
    //           width: 15,
    //           height: 15,
    //           decoration: BoxDecoration(
    //               shape: BoxShape.circle,
    //               color: Color(0xffc32c37),
    //               border: Border.all(color: Colors.white, width: 1)),
    //           child: Padding(
    //             padding: const EdgeInsets.all(0.0),
    //             child: Center(
    //               child: ValueListenableBuilder(),
    //             ),
    //           ),
    //         ),
    //       ),
    //     ],
    //   ),
    // );
  } else {
    return Container();
  }
}

class HomeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepOrange[900],
        title: Text('HuQQa BuzZ'),
        actions: <Widget>[myAppBarIcon()],

Answer 1

我就是这样做的:

//define a global variable
ValueNotifier<int> notificationCounterValueNotifer =
    ValueNotifier(0); 

您可以阅读 ValueNotifier here .
然后，当您收到新通知时，将该值增加 1:

 _fcm.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
        notificationCounterValueNotifer.value++;
        notificationCounterValueNotifer.notifyListeners(); // notify listeners here so ValueListenableBuilder will build the widget.
        

        // final snackbar = SnackBar(
        //   content: Text(message['notification']['title']),
        //   action: SnackBarAction(
        //     label: 'Go',
        //     onPressed: () => null,
        //   ),
        // );

        // Scaffold.of(context).showSnackBar(snackbar);
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
                content: ListTile(
                  title: Text(message['notification']['title']),
                  subtitle: Text(message['notification']['body']),
                ),
                actions: <Widget>[
                  FlatButton(
                    color: Colors.amber,
                    child: Text('Ok'),
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                ],
              ),
        );
      },
);

为了通知听众，您必须添加 ChangeNotifer作为你类(class)的混入:

class _MessageHandlerState extends State<MessageHandler> with ChangeNotifier

您可以选择 ValueListenableBuilder每当值更改时构建小部件。所以要更新徽章，我们使用这个小部件:

 ValueListenableBuilder(
              builder: (BuildContext context, int newNotificationCounterValue, Widget child) {
                // This builder will only get called when the notificationCounterValueNotifer is updated.
                return Text(newNotificationCounterValue.toString()); //return your badge here
              },
              valueListenable: notificationCounterValueNotifer,
);

您可以将值存储在数据库文档中并在应用程序开始时分配它，以便您的 notificationCounterValueNotifer值不为 0。
如果需要，您可以在导航到 notificationScreen 时再次将其设置为 0。 .
可能有更好的方法可以做到这一点，但这就是我的做法。
更新:
您需要返回 ValueListenableBuilder来自 myAppBarIcon :

Widget myAppBarIcon() {
    //you have to return the widget from builder method.
    //you can add logics inside your builder method. for example, if you don't want to show a badge when the value is 0.
    return ValueListenableBuilder(
      builder: (BuildContext context, int newNotificationCounterValue,
          Widget child) { 
        //returns an empty container if the value is 0 and returns the Stack otherwise
        return  newNotificationCounterValue == 0? Container(): Stack(
          children: [
            Icon(
              Icons.notifications,
              color: Colors.white,
              size: 30,
            ),
            Container(
              width: 30,
              height: 30,
              alignment: Alignment.topRight,
              margin: EdgeInsets.only(top: 2),
              child: Container(
                width: 15,
                height: 15,
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Color(0xffc32c37),
                    border: Border.all(color: Colors.white, width: 1)),
                child: Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: Text(
                    newNotificationCounterValue.toString(),
                  ),
                ),
              ),
            ),
          ],
        );
      },
      valueListenable: notificationCounterValueNotifer,
    );
}