Flutter

Overview

The sirenapp_flutter_inbox is a comprehensive and customizable Flutter UI kit for displaying and managing notifications. This documentation provides comprehensive information on how to install, configure, and use the SDK effectively.

Installation

To install the sirenapp_flutter_inbox package:

Open your pubspec.yaml file

Add sirenapp_flutter_inbox to your dependencies:Add sirenapp_flutter_inbox to your dependencies:

dependencies:
  sirenapp_flutter_inbox: ^1.0.0  # Use the latest version

Run flutter pub get in your terminal to install the package

Configuration

Initialization

Initialize the SDK with user token and recipient ID. Wrap the provider around your App’s root widget.

import 'package:sirenapp_flutter_inbox/sirenapp_flutter_inbox.dart';

void main() {
  runApp(
    SirenProvider(
      userToken: 'YOUR_USER_TOKEN',
      recipientId: 'YOUR_RECIPIENT_ID',
      child: const MyApp(),
    ),
  );
}

Configure Notification Icon

This widget displays a notification icon with a badge showing the number of unviewed notifications.

SirenInboxIcon()

Notification Icon Arguments

Argument	Description	Type	Default
`darkMode`	Enable dark mode when custom theme is not provided	`bool`	`false`
`disabled`	Disable click on icon	`bool`	`false`
`hideBadge`	Hide unviewed count badge	`bool`	`false`
`notificationIcon`	Custom notification icon	`Widget`	`null`
`onError`	Error callback	`Function(SirenErrorType)`	`null`
`onTap`	Custom tap handler	`VoidCallback`	`null`
`theme`	Theme properties	`CustomThemeColors`	`null`
`customStyles`	Style properties	`CustomStyles`	`null`

Configure Notification Inbox

The SirenInbox widget provides a paginated list view for displaying notifications.

SirenInbox(
  headerParams: HeaderParams(showBackButton: true),
  cardParams: CardParams(hideAvatar: false),
  onError: (error) {
    // Handle Error
  },
)

Inbox Arguments

Argument	Description	Type	Default
`darkMode`	Enable dark mode	`bool`	`false`
`hideTab`	Show/hide All/Unread tabs	`bool`	`false`
`itemsPerFetch`	Notifications per request (max 50)	`int`	`20`
`listEmptyWidget`	Custom empty state widget	`Widget`	`null`
`customCard`	Custom card builder	`Widget Function(NotificationType)`	`null`
`customLoader`	Custom loading widget	`Widget`	`null`
`customErrorWidget`	Custom error widget	`Widget`	`null`
`cardParams`	Card properties	`CardParams`	CardParams(`hideAvatar: false`, `disableAutoMarkAsRead: false`, `hideDelete: false`, `deleteIcon: Icon(Icons.close)`, `onAvatarClick: Function(NotificationType)`, `hideMediaThumbnail: false`, `onMediaThumbnailClick: Function(NotificationType))`
`headerParams`	Header properties	`HeaderParams`	HeaderParams(`hideHeader: false`, `hideClearAll: false`, `title: 'Notifications'`, `customHeader: null`, `showBackButton: false`, `backButton: null`, `onBackPress: null`)
`tabParams`	Tab bar properties	`TabParams`	TabParams(`tabs: [TabItem(key: 'ALL', title: 'All'), TabItem(key: 'UNREAD', title: 'Unread')], activeTabIndex: 0`)
`onCardClick`	Card tap handler	`Function(NotificationType)`	`null`
`onError`	Error callback	`Function(SirenErrorType)`	`null`
`theme`	Theme properties	`CustomThemeColors`	`null`
`customStyles`	Style properties	`CustomStyles`	`null`
`customTabIndicator`	Tab indicator decoration	`BoxDecoration`	`null`
`filterParams`	Filter configuration	`FilterParams`	FilterParams(`categoryFilterParams: CategoryFilterParams(showFilters: true`, `filterIconWidget: null`, `hideBadge: false`, `categoryFilterStyles: CategoryFilterStyles(dropdownTextStyle: null))`)

Filter Configuration

SirenInbox(
  filterParams: FilterParams(
    categoryFilterParams: CategoryFilterParams(
      showFilters: true,
      filterIconWidget: const Icon(Icons.filter_list),
      hideBadge: false,
      categoryFilterStyles: CategoryFilterStyles(
        dropdownTextStyle: const TextStyle(
          fontSize: 14,
          color: Colors.black87
        )
      )
    )
  )
)

Customization

Theme Customization

theme: CustomThemeColors(
  backgroundColor: Colors.blue,
  primary: Colors.blueAccent,
  highlightedCardColor: Colors.blue.shade100,
  borderColor: Colors.grey.shade300,
  deleteIcon: Colors.red,
  clearAllIcon: Colors.grey,
  textColor: Colors.black87,
  dateColor: Colors.grey,
  timerIcon: Colors.blue,
  notificationIconColor: Colors.blue,
  loaderColor: Colors.blue,
  inboxHeaderColors: InboxHeaderColors(
    background: Colors.white,
    titleColor: Colors.black87,
    headerActionColor: Colors.blue,
    borderColor: Colors.grey.shade300
  ),
  badgeColors: BadgeColors(
    backgroundColor: Colors.red,
    color: Colors.white
  ),
  cardColors: CardColors(
    borderColor: Colors.grey.shade300,
    background: Colors.white,
    titleColor: Colors.black87,
    subtitleColor: Colors.grey,
    descriptionColor: Colors.black54
  ),
  tabColors: TabColors(
    containerBackgroundColor: Colors.white,
    activeTabBackgroundColor: Colors.blue.shade50,
    activeTabTextColor: Colors.blue,
    inactiveTabTextColor: Colors.grey,
    indicatorColor: Colors.blue
  ),
  filterColors: FilterColors(
    categoryFilterColors: CategoryFilterColors(
      filterIconBorderColor: Colors.grey.shade300,
      filterBadgeColor: Colors.blue,
      filterDropdownBackgroundColor: Colors.white,
      filterCheckboxCheckedColor: Colors.blue,
      filterCheckboxUncheckedColor: Colors.grey.shade300,
      filterActionTextColor: Colors.black87,
      filterIconColor: Colors.blue,
      checkIconColor: Colors.white
    )
  )
)

Style Customization

customStyles: CustomStyles(
  container: ContainerStyle(
    padding: const EdgeInsets.all(16),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(8)
    ),
    margin: const EdgeInsets.all(8)
  ),
  cardStyle: CardStyle(
    cardContainer: ContainerStyle(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.grey.shade300),
        borderRadius: BorderRadius.circular(8)
      )
    ),
    cardTitle: const TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.w600,
      color: Colors.black87
    ),
    cardSubtitle: const TextStyle(
      fontSize: 14,
      fontWeight: FontWeight.w500,
      color: Colors.grey
    ),
    cardDescription: const TextStyle(
      fontSize: 14,
      color: Colors.black54
    ),
    dateStyle: const TextStyle(
      fontSize: 12,
      color: Colors.grey
    ),
    avatarSize: 40
  ),
  appBarStyle: InboxHeaderStyle(
    headerTextStyle: const TextStyle(
      fontSize: 18,
      fontWeight: FontWeight.w600,
      color: Colors.black87
    ),
    titlePadding: const EdgeInsets.symmetric(horizontal: 16),
    borderWidth: 1
  ),
  notificationIconStyle: const NotificationIconStyle(
    size: 24
  ),
  badgeStyle: const BadgeStyle(
    fontSize: 12,
    size: 20,
    top: 0,
    right: 2
  ),
  timerIconStyle: const TimerIconStyle(
    size: 20
  ),
  deleteIconStyle: const DeleteIconStyle(
    size: 20
  ),
  clearAllIconStyle: const ClearAllIconStyle(
    size: 20
  ),
  tabStyles: TabStyles(
    containerStyle: ContainerStyle(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      margin: const EdgeInsets.only(bottom: 8)
    ),
    activeTabTextStyle: const TextStyle(
      fontSize: 14,
      fontWeight: FontWeight.w600,
      color: Colors.blue
    ),
    inActiveTabTextStyle: const TextStyle(
      fontSize: 14,
      fontWeight: FontWeight.w500,
      color: Colors.grey
    ),
    indicatorSize: 2,
    indicatorPadding: const EdgeInsets.symmetric(horizontal: 16)
  ),
  hideTabMargin: const HideTabMargin(
    upper: false,
    lower: false
  ),
  filterStyles: FilterStyles(
    categoryFilterStyles: const CategoryFilterStyles(
      dropdownTextStyle: TextStyle(
        fontSize: 14,
        color: Colors.black87
      )
    )
  )
)

Siren Class

The Siren class provides utility functions for managing notifications:

Function	Arguments	Type	Description
`markAsReadByDate`	`startDate: String`	`String`	Sets notifications as read until the given date
`markAsReadById`	`id: String`	`String`	Marks a specific notification as read
`deleteById`	`id: String`	`String`	Deletes a specific notification
`deleteByDate`	`startDate: String`	`String`	Deletes notifications until the given date
`markAllAsViewed`	`startDate: String`	`String`	Marks all notifications as viewed until the given date

Complete Example

import 'package:flutter/material.dart';
import 'package:sirenapp_flutter_inbox/sirenapp_flutter_inbox.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SirenProvider(
      userToken: 'YOUR_USER_TOKEN',
      recipientId: 'YOUR_RECIPIENT_ID',
      child: MaterialApp(
        title: 'Siren Flutter Inbox',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Home Page'),
      ));
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text(''),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: Row(
              children: [
                SirenInboxIcon(),
              ],
            ),
          ),
        ],
      ),
      body: SirenInbox(),
    );
  }
}

Backend SDKs

Frontend SDKs

Overview

Installation

Configuration

Initialization

Configure Notification Icon

Notification Icon Arguments

Configure Notification Inbox

Inbox Arguments

Filter Configuration

Customization

Siren Class

Complete Example

Backend SDKs

Frontend SDKs

​Overview

​Installation

​Configuration

​Initialization

​Configure Notification Icon

​Notification Icon Arguments

​Configure Notification Inbox

​Inbox Arguments

​Filter Configuration

​Customization

​Siren Class

​Complete Example

Overview

Installation

Configuration

Initialization

Configure Notification Icon

Notification Icon Arguments

Configure Notification Inbox

Inbox Arguments

Filter Configuration

Customization

Siren Class

Complete Example