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:

  1. Customize the config object and call the Inbox in the inboxDidInitialize() method
  2. 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);

Did this page help you?