Flutter开发 使用FCM实现前后台的推送

前言：

     目前Flutter的FCM推送只支持Android，需要google service支持。下面我简单总结一下在Flutter中如何实现FCM前后台推送，主要包括“通知消息”的推送和“底部导航的未读消息”推送。

实现的代码：

1.Google官网注册应用

   首先去网址：https://console.firebase.google.com/ 去注册自己的应用，并下载google-services.json的文件，把它放到自己项目的app/目录。

2.添加依赖

  2.1 Project的build.gradle

 classpath 'com.google.gms:google-services:4.0.1' 

  2.2  Module的build.gradle

dependencies {
     implementation 'com.google.firebase:firebase-core:16.0.1'
}
apply plugin: 'com.google.gms.google-services'    //这一句一定要放在最下面，否则无效

3.配置AndroidMenifest.xml文件

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="项目包名">

    <uses-permission android:name="android.permission.INTERNET"/>

    <application>
        <activity>
            <intent-filter>
                <action android:name="FLUTTER_NOTIFICATION_CLICK" />
                <category android:name="android.intent.category.DEFAULT" />
            </intent-filter>
        </activity>
    </application>
</manifest>

 

4.在pubspec.yaml添加sdk

dependencies:
  ...
  cupertino_icons: ^0.1.0
  firebase_messaging: ^4.0.0+1

5.通知消息的推送

class DashboardPageState extends State<DashboardPage>{
  final FirebaseMessaging _fireBaseMessaging = FirebaseMessaging();

  ...

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

    //push notification
    _fireBaseMessaging.requestNotificationPermissions(
        const IosNotificationSettings(sound: true, badge: true, alert: true));
    _fireBaseMessaging.getToken().then((token) {
//      print(token);
      if (token != null) {
        _postFcm(token);//推送的post请求
      }
    });

  }

  //推送的post请求
  Future _postFcm(String token) async {
      String url = url;
      var data = {"token": token};
      DioUtil.post(url, data: data).then((response) {
    });
  }

}

6.底部导航的未读消息推送

class DashboardPageState extends State<DashboardPage>{
  final FirebaseMessaging _fireBaseMessaging = FirebaseMessaging();
  int _tabIndex = 0;
  bool clickBadge = false;
  var count=""; //初始化未读条数
  List<BottomNavigationBarItem> items;

  //自定义badger的样式
  BottomNavigationBadge badger = new BottomNavigationBadge(
      backgroundColor: Colors.red,
      badgeShape: BottomNavigationBadgeShape.circle,
      textColor: Colors.white,
      position: BottomNavigationBadgePosition.topRight,
      textSize: 8);

    @override
  void initState() {
    super.initState();
    _fireBaseMessaging.configure(onMessage: (Map message) {
      handleMessage(message);
    }, onLaunch: (Map message) {
      handleMessage(message);
    }, onResume: (Map message) {
      handleMessage(message);
    });
  }

  void handleMessage(Map message) {
    setState(() {
      var data = message["data"];
      count = data["count"]; //获取未读条数
    });
  }

  void _change(int index) {
    setState(() {
      _tabIndex = index;
      if (index == 1) {
        clickBadge = true;
        items = badger.removeAll(items);//点击底部导航时，移除badge
      }
    });
  }

   @override
  Widget build(BuildContext context) {
    initData();
    return Scaffold(
        appBar: buildAppBar(),
        body: buildTabContent(),
        bottomNavigationBar: CupertinoTabBar(
          backgroundColor: Color(0xFF384F6F),
          currentIndex: _tabIndex,
          onTap: _change,
          items: items,
        ));
  }

  void initData() {
    setState(() {
      if (clickBadge == false && count!=null) {//根据条件，动态添加badge
        badger.setBadge(items, count, 1);
      }
    });
  }

}

7.总结：

在Flutter上已经实现FCM前后台的推送功能啦，欢迎大家围观。如果有什么疑问的话，可以留言联系我哦！