Implement HMS Push Kit with Flutter

Introduction

Push Kit is a real time cross platform messaging service. It establishes a messaging channel from the cloud to devices. You can send notifications your Android, iOS and Web users using Push Kit.

Process of sending messages from the cloud to a device

Push Kit supports two types of notification:

• Notification messages: The user can tap the notification message to trigger the corresponding action such as opening the app, a web page, or a specific page in the app. The following figure shows how notification messages are displayed on a device.
• Data messages: The content of data messages is defined by you and parsed by your app. After a device receives a data message, the system transfers it to the app instead of directly displaying the message. The app then parses the message and triggers the corresponding action. HUAWEI Push Kit only functions as a channel.

You can send notification and data messages to your users from your server using Push Kit APIs or AppGallery Push Console.

Currently Push kit is not available on Flutter but we can implement Push kit to our Flutter projects using Platform channels. Platform channels in Flutter allows trigger platform specific APIs to developers. You can also implement same way other HMS Kits that do not currently have an official plugin.

How to write a platform specific code in Flutter?

Flutter provides a safe and flexible architecture for call platform specific APIs whether Kotlin or Java code on Android or Swift or Objective-C code on iOS.

Flutter Channel Architecture

Communication is bidirectional and asynchronous in Flutter. Developers can trigger a function on the native platform or send a message to the native platform. Conversely, they can also send messages from the native platform to the flutter side or trigger a function.

Platform Channel don’t generate code for sending and receiving messages.

You can find more information about method channels here.

Development

Prerequisites

If you want to use the Push Kit, you must first have a developer account from AppGallery Connect. You need to create an application from your developer account. I will not write these steps so that the article doesn’t lose its purpose and I will assume that it is already integrated in your project. You can find the guide here.

Your app’s minSdkVersion should be minumum 17.

Note: Make you sure entered SHA-256 certificate fingerprint on your project on App Gallery Connect. Otherwise your app won’t receive notifications.

How to generate SHA-256 Key using Android Studio

1. Open your android project in Flutter project into the Android studio.
2. Click on the Gradle section on the right panel.
3. Double click to APP_MODULE -> Tasks -> Android -> signingReport

Generate SHA Fingerprint

SHA-256 fingerprint will be generate. Copy and paste into SHA-256 fingerprint on the project settings on the AppGallery Console.

Project settings screen on AppGallery Console

Setting the Data Storage Location

You should set data storage location before using Push kit.

Project settings screen on AppGallery Console

Configure data storage settings and click OK.

Setting the Data Storage Location

Integrate HMS SDK

Step 1: Download agconnect-services.json file and copy into the

your_project ->android->app

Project settings screen on AppGallery Console

Your project structure should seem like below after the copied file.

Copy agconnect-services.json into your project

Step 2: Add dependencies to your gradle file

• build.gradle (Project Level)

• build.gradle (App Level)

Step 3: That’s all. Build gradle again. HMS will be implemented on your project.

Enable Push Kit from App Gallery Connect

AppGallery Connect Push Console

Native Part — Android

Add Push kit library to gradle file (App Level) and sync your project.

Create the NativeHMSMessageService class by extending the HmsMessageService class.

Add service between <application> tags in the AndroidManifest.xml

Define a broadcast receiver in your activity. This Broadcast receiver receives data from our NativeHMSMessageService.

Define a channel and register broadcast receiver in your activity. Flutter and Native part communicate using “com.ekrmh.hmspushsample/notification” channel.

Flutter Part

Define a MethodChannel and setMethodCallHandler. It must have the same channel name as Android. otherwise they cannot communicate with each other.

At the end, your Flutter code should be look like at the below.

Run

That’s all. You implemented Push Kit to your Flutter project. You can send push notifications using Push Kit on AppGallery Connect.

Data Message

Notification Message

Conclusion

In this article, you learned how implement Push Kit with Flutter.

You can find more information about Push Kit below the links.

Guide

Codelab

ekrmh/flutter_hms_push_sample

That is all.

Thanks.