Skip to main content

​
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:
1

Open your pubspec.yaml file
2

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
3

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

ArgumentDescriptionTypeDefault
darkModeEnable dark mode when custom theme is not providedboolfalse
disabledDisable click on iconboolfalse
hideBadgeHide unviewed count badgeboolfalse
notificationIconCustom notification iconWidgetnull
onErrorError callbackFunction(SirenErrorType)null
onTapCustom tap handlerVoidCallbacknull
themeTheme propertiesCustomThemeColorsnull
customStylesStyle propertiesCustomStylesnull

​
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

ArgumentDescriptionTypeDefault
darkModeEnable dark modeboolfalse
hideTabShow/hide All/Unread tabsboolfalse
itemsPerFetchNotifications per request (max 50)int20
listEmptyWidgetCustom empty state widgetWidgetnull
customCardCustom card builderWidget Function(NotificationType)null
customLoaderCustom loading widgetWidgetnull
customErrorWidgetCustom error widgetWidgetnull
cardParamsCard propertiesCardParamsCardParams(hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false, deleteIcon: Icon(Icons.close), onAvatarClick: Function(NotificationType), hideMediaThumbnail: false, onMediaThumbnailClick: Function(NotificationType))
headerParamsHeader propertiesHeaderParamsHeaderParams(hideHeader: false, hideClearAll: false, title: 'Notifications', customHeader: null, showBackButton: false, backButton: null, onBackPress: null)
tabParamsTab bar propertiesTabParamsTabParams(tabs: [TabItem(key: 'ALL', title: 'All'), TabItem(key: 'UNREAD', title: 'Unread')], activeTabIndex: 0)
onCardClickCard tap handlerFunction(NotificationType)null
onErrorError callbackFunction(SirenErrorType)null
themeTheme propertiesCustomThemeColorsnull
customStylesStyle propertiesCustomStylesnull
customTabIndicatorTab indicator decorationBoxDecorationnull
filterParamsFilter configurationFilterParamsFilterParams(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:
FunctionArgumentsTypeDescription
markAsReadByDatestartDate: StringStringSets notifications as read until the given date
markAsReadByIdid: StringStringMarks a specific notification as read
deleteByIdid: StringStringDeletes a specific notification
deleteByDatestartDate: StringStringDeletes notifications until the given date
markAllAsViewedstartDate: StringStringMarks 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(),
    );
  }
}