Flutter App Inbox
Learn how to handle app inbox notifications in Flutter.
Overview
App Inbox is a messaging channel that provides the ability to deliver rich, individually customized content to your users. Messages sent to App Inbox are saved on the user's device.
App Inbox provides the ability to send permanent content directly to your app from the CleverTap dashboard. Moreover, the inbox messages target individual segments such as other messaging channels. Your inbox can look different from another user's inbox; the possibilities are endless.
App Inbox
- The CleverTap Flutter SDK allows you to create App Inbox notifications for your users.
- You can use the App Inbox provided by CleverTap or create your own
- You can design App Inbox notifications right from the dashboard
Android
On the Android side, add the following inbox dependencies in your app's build.gradle.
//MANDATORY for App Inbox
implementation 'androidx.appcompat:appcompat:1.3.1'
implementation 'androidx.recyclerview:recyclerview:1.2.1'
implementation 'androidx.viewpager:viewpager:1.0.0'
implementation 'com.google.android.material:material:1.4.0'
implementation 'com.github.bumptech.glide:glide:4.12.0'
//Optional ExoPlayer Libraries for Audio/Video Inbox Messages. Audio/Video messages will be dropped without these dependencies
implementation 'com.google.android.exoplayer:exoplayer:2.15.1'
implementation 'com.google.android.exoplayer:exoplayer-hls:2.15.1'
implementation 'com.google.android.exoplayer:exoplayer-ui:2.15.1'
Flutter
Initializing the Inbox provides a callback to two methods inboxDidInitialize()
and inboxMessagesDidUpdate()
CleverTapPlugin.initializeInbox();
Configure styling and show the inbox by:
- Customize the config object and call the Inbox in the
inboxDidInitialize()
method - Call this method on the button click which opens the CleverTap Inbox for your App
_clevertapPlugin.setCleverTapInboxDidInitializeHandler(inboxDidInitialize);
void inboxDidInitialize() {
this.setState(() {
print("inboxDidInitialize called");
var styleConfig = {
'noMessageTextColor': '#ff6600',
'noMessageText': 'No message(s) to show.',
'navBarTitle': 'App Inbox'
};
CleverTapPlugin.showInbox(styleConfig);
});
}
When a new inbox message arrives, the SDK provides the inboxMessagesDidUpdate()
callback
_clevertapPlugin
.setCleverTapInboxMessagesDidUpdateHandler(inboxMessagesDidUpdate);
void inboxMessagesDidUpdate() {
this.setState(() async {
print("inboxMessagesDidUpdate called");
});
}
Creating your own App Inbox
You can choose to create your own App Inbox by calling the following APIs
Initialize App Inbox
CleverTapPlugin.initializeInbox();
Show App Inbox
var styleConfig = {
'noMessageTextColor': '#ff6600',
'noMessageText': 'No message(s) to show.',
'navBarTitle': 'App Inbox'
};
CleverTapPlugin.showInbox(styleConfig);
Get Total Inbox Message Count
int total = await CleverTapPlugin.getInboxMessageCount();
print("Total count = " + total.toString());
Get Total Inbox Unread Count
int unread = await CleverTapPlugin.getInboxMessageUnreadCount();
print("Unread count = " + unread.toString());
Get All Inbox Messages
List messages = await CleverTapPlugin.getAllInboxMessages();
Get All Inbox Unread Messages
List messages = await CleverTapPlugin.getUnreadInboxMessages();
Get Inbox Message for the given message-id
var messageForId = await CleverTapPlugin.getInboxMessageForId(messageId);
Delete Message for the given message-id
await CleverTapPlugin.deleteInboxMessageForId(messageId);
Mark Message as Read for the given message-id
var messageList = await CleverTapPlugin.getUnreadInboxMessages();
if (messageList == null || messageList.length == 0) return;
Map<dynamic, dynamic> itemFirst = messageList[0];
if (Platform.isAndroid) {
await CleverTapPlugin.markReadInboxMessageForId(itemFirst["id"]);
} else if (Platform.isIOS) {
await CleverTapPlugin.markReadInboxMessageForId(itemFirst["_id"]);
}
Raise Notification Viewed event for Inbox Message. Message-id should be a String
await CleverTapPlugin.pushInboxNotificationViewedEventForId(messageId);
Raise Notification Clicked event for Inbox Message. Message-id should be a String
await CleverTapPlugin.pushInboxNotificationClickedEventForId(messageId);
Updated 5 months ago