Using Huawei App Messaging in Flutter
Tags: android, flutter, huawei, appgallery
Published: 2022-02-01 10:27:51

Huawei AppGallery Connect's App Messaging service allows you to send targeted, useful in app messages to your users. 
The look and content of messages are completely customisable, and there is a wide range of triggers and filters that can be used to decide who will receive a message and when.
Lets take a look today at how we can set this up to work within a flutter project.

As always we will start with a fresh project but of course you can just as easily use this guide to build the service into an app you already have!

## Installing the Flutter Environment

1.	[Download the Flutter SDK](https://docs.flutter.dev/get-started/install/windows).
2.	Decompress the package to any directory.
3.	Add the Flutter command file to the environment variable.
4.	Download the Flutter and Dart plugins in Android Studio.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g75ecvyyk8a86rg1hg0n.png)

## Enabling the Service and Creating a Flutter project

Sign in to AppGallery Connect, click **My projects**, click your project, go to **Grow > App Messaging**, and click Use now. For more information, please refer to [App Messaging](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-appmessage-getstarted-android-0000001072532718).
If you do not have an Android project, create one first.
After completing these steps, you can start creating an in-app message.

Click **New** in the upper right corner.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2b3jpegx24drmi3yqp2s.png)

Set **Name** and **Description** 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/liz3d1i7rlfs5owrqpjq.png)

Set the style and content and click **Next**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds0pf7wcbh29hd47cehe.png)
 
Select a message type from the Layout drop-down list, and set its style and content. Currently, the Modal, Image, and Banner message types are supported.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hci52rf3ajioxo7r5iq6.png)
 
Set target users and click Next.

In App, select the name of the app package for which you need to publish the in-app message.

You can click New condition to add a condition for matching target users, which include app version, OS version, language, country/region, audience, and more. Among the types, User attributes are defined under HUAWEI Analytics > Management > User attributes, and Prediction is defined by creating prediction tasks under My projects > Grow > Prediction.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6652um0hiv7ezkb03wc.png)
 
Set the message sending time
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewwyinui587x0ufryhlj.png)
Message display is triggered by specific events. App Messaging supports two types of [trigger events](https://developer.huawei.com/consumer/en/doc/development/AppGallery-connect-Guides/agc-appmessage-create-android-0000001072054882): preset events and HUAWEI Analytics events. 
(Optional) Set conversion events. Before setting a conversion event, you need to toggle it on first, which can be done as follows:
Go to HUAWEI Analytics > Management > Events and toggle Mark as conversion event and Event switch on for the specified event. In addition to the events the SDK collects, you can also create a preset or custom event for event tracking and analysis.

Finally, Click Save or Publish.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9shx8mh58b1n0huswazc.png)
 
## Integrating the Service SDK

### Add dependencies
Start by creating a Flutter project in Android Studio (or opening one).
Then add the **agconnect-services.json** file from your AppGallery project to the android/app directory
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48r1aw16xxrershg8fhf.png)
 
Within the project level **build.gradle** file make sure to include the huawei maven repo and add the agcp package as a dependency.

{% gist https://gist.github.com/devwithzachary/961ca8035184a4de307c48003bda385a %}

Next in your app level **build.gradle** apply the agconnect plugin as so:

{% gist https://gist.github.com/devwithzachary/36775c105e9ebeac07cbb324014d4d7b %}

Then in your **pubspec.yaml** file add the App Messaging SDK dependency. 

{% gist https://gist.github.com/devwithzachary/081c7f2b487bee8de1ffa42f697d71f8 %}

### Displaying an In-App Message
If you choose to display a message using the default message layout, the development process is totally coding-free. 
By integrating the SDK as above you are all good to go, your creating message will be displayed as per its filters and triggers.
You can also call APIs provided by the service SDK to customize your in-app message.

### Customising the Message Layout
Add the following code to onCreate in MainActivity,

{% gist https://gist.github.com/devwithzachary/a3e7bdf4254b4df2ad29f1fd6f296c08 %}
so that the service SDK can listen to the corresponding event and apply the customized layout.

{% gist https://gist.github.com/devwithzachary/33e318d6410849fedc2b6e735c28eeb0 %}

Then the message is displayed in your app.

{% gist https://gist.github.com/devwithzachary/e359065392d5723810d8b1362d673dfe %}


## Testing an In-App Message
App Messaging allows you to test an in-app message before it is published. You need to obtain the Anonymous Application Identifier (AAID) of your test device by adding the following code to your Android app module.

{% gist https://gist.github.com/devwithzachary/4b7cd4f2b51e8366c94eb20d23474501 %}

Sign in to AppGallery Connect, go to **Grow > App Messaging > Messages**, find the message that you created, click   and select **Test** in the **Operation** column.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ne7921ydhen16laetv5.png)

Click Add test user and enter the AAID

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tfv2mnnwwp9396famrgj.png)

Click Save. Check whether the test message is properly displayed on your test device