Cross-Platform Client Engineering with Flutter In-App SDK

Fyno’s Flutter InApp SDK offers a comprehensive set of notification features within your app. It’s designed to efficiently deliver messages, ensuring optimal performance and user experience.

Important Note:

• Web support has been added to the Flutter In-App SDK starting from version 1.2.0. From this version onwards, the SDK can be easily integrated and used in Flutter Web applications in addition to mobile platforms.
• If you are developing for the web, please ensure that your project is using Flutter In-App SDK v1.2.0 or later to access and benefit from web compatibility. Web-based implementations are only supported in newer SDK versions; projects using earlier versions do not have this capability.

Installation

Install the package by using one of the following commands.

$
dart pub add fyno_flutter_inapp

This will add a line like this to your package’s pubspec.yaml (and run an implicit dart/flutter pub get):

1
dependencies:
2
  fyno_flutter_inapp: <latest_version>

Alternatively, your editor might support dart/flutter pub get. Check the docs for your editor to learn more.

Usage

Before you dive into using the In-App Notification Center, there are some prerequisites you need to fulfill. You must ensure you have the necessary information and generate an HMAC signature.

Prerequisites

Before you start, make sure you have the following information ready

• Workspace ID (WSID): You can find your workspace ID on your Fyno App > API Keys page.
• Integration Token: Obtain the integration token from the Fyno App > Integrations page.
• User ID: This should be a unique identifier for the currently logged-in user. This user ID is crucial for Fyno to send specific notifications to the right users.

HMAC Signature Generation

The HMAC signature is essential for ensuring the security and integrity of your notifications. Here is an example of how to generate the HMAC signature in various programming languages.

1
import 'dart:convert';
2
import 'package:crypto/crypto.dart';
3
4
void main() {
5
  String signature = Hmac(sha256, utf8.encode(workspaceId + integrationToken))
6
      .convert(utf8.encode(userId))
7
      .toString();
8
}

SDK Initialisation

Import the package in your Dart file:

1
import 'package:fyno_flutter_inapp/fyno_flutter_inapp.dart';

To use the SDK in your Flutter application, initialise the SDK as follows:

1
final FynoInApp fynoInApp = FynoInApp();
2
3
//Web Socket connection
4
fynoInApp.fynoInAppSocketConnect(
5
  workspaceId,
6
  integrationId,
7
  userId,
8
  origin,
9
  signature,
10
);

Reset SDK

To reset the Inapp SDK, typically during logout, call the fynoInapp.reset() function.

1
fynoInApp.reset();

In-App UI

There are 3 ways you can configure the InApp UI.

1. Fyno UI
2. Fyno Customisable UI
3. Your own UI

Fyno UI

1
fynoInApp.getFynoNotificationIconButton(
2
  context,
3
  <icon_color>,
4
),

Fyno Customisable UI

To customise the Fyno UI, you can pass the notification icon and colours you would like to use for the inapp notification inbox.

As of now, you can only change notification icon to any of the built in icons.

You can do the customisation as follows:

1
fynoInApp.getFynoNotificationIconButton(
2
    context,
3
    <icon_color>,
4
    notificationIcon: <notification_icon>,
5
    themeConfig: ThemeConfig(
6
        lightBackground: <light_background>,
7
        darkBackground: <dark_background>,
8
        lightText: <light_text>,
9
        darkText: <dark_text>,
10
        primary: <primary>,
11
    ),
12
)

• lightBackground (optional) - The background color in light mode
• darkBackground (optional) - The background color in dark mode
• lightText (optional) - The text color in light mode
• darkText (optional) - The text color in dark mode
• primary (optional) - The background color of primary buttons (if any) in the notification

Your own UI

You have the flexibility to build your own UI. Additionally, you can personalise the icons for actions like ‘Read all’ and ‘Delete all’ with your own custom designs. If you are going to use this approach, it is necessary to invoke the following functions.

1
fynoInApp.fynoInAppState.count;

1
fynoInApp.fynoInAppState.unreadCount

1
fynoInApp.fynoInAppState.list

1
fynoInApp.fynoInAppState.unreadList

1
fynoInApp.fynoInAppState.page

1
fynoInApp.markAllAsRead()

1
fynoInApp.deleteAllMessages()

1
fynoInApp.markAsRead(notification)
2
// pass one of the items from the list: fynoInApp.fynoInAppState.list

1
fynoInApp.deleteMessage(notification)
2
// pass one of the items from the list: fynoInApp.fynoInAppState.list

1
fynoInApp.loadMoreNotifications(page, type)
2
// type -> 'all' or 'unread', page should be greater than zero