SuprSend uses flutter hooks to provide inbox functionality in flutter applications.

​
Installation

1

Project’s pubspec.yaml changes

Add the following line of code inside dependencies in the pubspec.yaml file under the dependencies section

dependencies:
  flutter:
  	sdk: flutter
  suprsend_flutter_inbox: "^0.0.1"
2

Run flutter pub get in the terminal

$ flutter pub get

​
Initialization

Enclose your Material App inside SuprSendProvider and pass the workspace key, workspace secret, distinct_id, and subscriber_id.

import 'package:suprsend_flutter_inbox/main.dart';

SuprSendProvider(
    workspaceKey: <your workspace key>,
    workspaceSecret:  <your workspace secret>,
    distinctId: distinct_id,
    subscriberId: subscriber_id,
    child: YourAppComponent()
)
SuprSend hooks can only be used inside of SuprSendProvider.

​
Adding SuprSend Inbox component

​
useBell hook

This hook provides unSeenCount, markAllSeen which is related to the Bell icon in the inbox

unSeenCount: Use this variable to show the unseen notification count anywhere in your application. markAllSeen: Used to mark seen for all notifications. Call this method on clicking the bell icon so that it will reset the notification count to 0.

import 'package:suprsend_flutter_inbox/main.dart';

final bellData = useBell();

// bellData structure:
{
  "unSeenCount": int,
  "markAllSeen": ()=>void
}

​
useNotifications hook

This hook provides a notifications list, unSeenCount, markClicked, and markAllSeen.

notifications: List of all notifications. This array can be looped and notifications can be displayed.

unSeenCount: Use this variable to show the unseen notification count anywhere in your application.

markClicked: Method used to mark a notification as clicked. Pass notification id which is clicked as the first param.

import 'package:suprsend_flutter_inbox/main.dart';

final notifData = useNotifications();

// notifData structure:
{
  "notifications": List<Noticication>,
  "unSeenCount": int,
  "markAllSeen": ()=>void
  "markClicked":(n_id)=>void
}

// Noticication structure:
{
  "n_id": string,
  "n_category": string,
  "created_on": int,
  "seen_on": int,
  "message": {
    "header": string,
    "text": string,
    "url": string,
    "extra_data": string,
    "avatar":{
    	"action_url": string,
      "avatar_url": string
    },
    "subtext":{
      "text": string,
      "action_url": string
    }
    "actions":[
      {
        "name": string,
        "url": string
      }
    ]
  }
}

​
Example Implementation

Example implementation can be found here.

Was this page helpful?