{"id":31840083,"url":"https://github.com/keyvaluesoftwaresystems/siren-flutter-inbox","last_synced_at":"2025-10-29T16:16:23.864Z","repository":{"id":318435312,"uuid":"761595633","full_name":"KeyValueSoftwareSystems/siren-flutter-inbox","owner":"KeyValueSoftwareSystems","description":null,"archived":false,"fork":false,"pushed_at":"2025-06-09T06:56:28.000Z","size":595,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-19T01:22:23.977Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KeyValueSoftwareSystems.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-02-22T05:56:50.000Z","updated_at":"2025-09-11T02:08:56.000Z","dependencies_parsed_at":"2025-10-07T07:27:14.407Z","dependency_job_id":"77dc5fad-422c-41a4-9daa-2f4761812812","html_url":"https://github.com/KeyValueSoftwareSystems/siren-flutter-inbox","commit_stats":null,"previous_names":["keyvaluesoftwaresystems/siren-flutter-inbox"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/KeyValueSoftwareSystems/siren-flutter-inbox","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-flutter-inbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-flutter-inbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-flutter-inbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-flutter-inbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KeyValueSoftwareSystems","download_url":"https://codeload.github.com/KeyValueSoftwareSystems/siren-flutter-inbox/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KeyValueSoftwareSystems%2Fsiren-flutter-inbox/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281652708,"owners_count":26538301,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-29T02:00:06.901Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-12T04:52:07.341Z","updated_at":"2025-10-29T16:16:23.858Z","avatar_url":"https://github.com/KeyValueSoftwareSystems.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Siren Flutter Inbox\n\n## Overview\n\nThe `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.\n\n## 1. Installation\n\nTo install the `sirenapp_flutter_inbox` package,\n\n1. Open your `pubspec.yaml` file.\n2. Add `sirenapp_flutter_inbox` to your dependencies.\n3. Run `flutter pub get` in your terminal to install the package.\n\n## 2. Configuration\n\n### 2.1 Initialization\n\nInitialize the sdk with user token and recipient id. Wrap the provider around your App's root.\n\n```dart\nimport 'package:sirenapp_flutter_inbox/sirenapp_flutter_inbox.dart';\n\nvoid main() {\n  runApp(\n    SirenProvider(\n        userToken: 'YOUR_USER_TOKEN',\n        recipientId: 'YOUR_RECIPIENT_ID',\n        child: MyApp(),\n    ),\n  );\n}\n```\n\n### 2.2 Configure notification icon\n\nOnce the provider is configured, next step is to configure the notification icon\n\nThis widget consists of a notification icon along with a badge to display the number of unviewed notifications.\n\n```dart\nSirenInboxIcon()\n```\n\n#### Arguments for notification icon\n\nBelow are optional arguments available for the icon widget:\n\n| Arguments        | Description                                                | Type                     | Default value |\n| ---------------- | ---------------------------------------------------------- | ------------------------ | ------------- |\n| darkMode         | Toggle to enable dark mode when custom theme is not passed | bool                     | false         |\n| disabled         | Toggle to disable click on icon                            | bool                     | false         |\n| hideBadge        | Toggle to hide unviewed count badge                        | bool                     | false         |\n| notificationIcon | Option to use custom notification icon                     | Widget                   | null          |\n| onError          | Callback for handling errors                               | Function(SirenErrorType) | null          |\n| onTap            | Custom click handler for notification icon                 | VoidCallback             | null          |\n| theme            | Theme properties for custom color theme                    | CustomThemeColors        | null          |\n| customStyles     | Style properties for custom styling                        | CustomStyles             | null          |\n\n#### Theme customization\n\nHere are the available theme options:\n\n```dart\n theme: CustomThemeColors(\n    notificationIconColor: Colors.purple,\n    badgeColors: BadgeColors(\n    color: Colors.greenAccent, textColor: Colors.black),\n )\n```\n\n#### Style customization\n\nHere are the custom style options for the notification icon:\n\n```dart\n customStyles: CustomStyles(\n    notificationIconStyle: NotificationIconStyle(size: 20),\n    badgeStyle: BadgeStyle(fontSize: 9, size: 5),\n )\n```\n\n### 2.3. Configure notification inbox\n\nInbox is a paginated list view for displaying notifications.\n\n```dart\n SirenInbox(\n    headerParams: HeaderParams(showBackButton: true),\n    cardParams: CardParams(hideAvatar: false),\n    onError: (error) {\n        // Handle Error\n    },\n )\n```\n\n#### Arguments for the notification inbox\n\nGiven below are the arguments of Siren Inbox Widget.\n\n| Arguments         | Description                                                          | Type                       | Default value                                                                                                                                                                                                                          |\n| ----------------- | -------------------------------------------------------------------- | -------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| darkMode          | Toggle to enable dark mode when custom theme is not passed           | bool                       | false                                                                                                                                                                                                                                  |\n| hideTab           | Toggle to enable all and unread tabs                                 | bool                       | false                                                                                                                                                                                                                                  |\n| itemsPerFetch     | Number of notifications fetch per api request (max 50)               | int                        | 20                                                                                                                                                                                                                                     |\n| listEmptyWidget   | Custom widget for empty notification list                            | Widget                     | null                                                                                                                                                                                                                                   |\n| customCard        | Custom builder for notification cards                                | Widget Function(NotificationType) | null                                                                                                                                                                                                                                   |\n| customLoader      | Custom widget to display the initial loading state                   | Widget                     | null                                                                                                                                                                                                                                   |\n| customErrorWidget | Custom error widget                                                  | Widget                     | null                                                                                                                                                                                                                                   |\n| cardParams        | Properties of notification card                                      | CardParams                 | CardParams(hideAvatar: false, disableAutoMarkAsRead: false, hideDelete: false, deleteIcon: Icon(Icons.close), onAvatarClick: Function(NotificationType), hideMediaThumbnail: false, onMediaThumbnailClick: Function(NotificationType)) |\n| headerParams      | Properties of notification window header                             | HeaderParams               | HeaderParams(hideHeader: false, hideClearAll: false, title: 'Notifications', customHeader: null, showBackButton: false, backButton: null, onBackPress: null)                                                                          |\n| tabParams         | Properties of tab bar                                                | TabParams                  | TabParams(tabs: [TabItem(key: 'ALL', title: 'All'), TabItem(key: 'UNREAD', title: 'Unread')], activeTabIndex: 0)                                                                                                                       |\n| onCardClick       | Custom click handler for notification cards                          | Function(NotificationType) | null                                                                                                                                                                                                                                   |\n| onError           | Callback for handling errors                                         | Function(SirenErrorType)   | null                                                                                                                                                                                                                                   |\n| theme             | Theme properties for custom color theme                              | CustomThemeColors          | null                                                                                                                                                                                                                                   |\n| customStyles      | Style properties for custom styling                                  | CustomStyles               | null                                                                                                                                                                                                                                   |\n| customTabIndicator| Custom decoration for tab indicator                                  | BoxDecoration             | null                                                                                                                                                                                                                                   |\n| filterParams      | Properties for configuring the filter dropdown                     | FilterParams               | FilterParams(categoryFilterParams: CategoryFilterParams(showFilters: true, filterIconWidget: null, hideBadge: false, categoryFilterStyles: CategoryFilterStyles(dropdownTextStyle: null)))                                                                                                                                                 |\n\n#### Theme customization\n\nHere are the available theme options:\n\n```dart\ntheme: CustomThemeColors(\n    backgroundColor: Colors.blue,\n    primary: Colors.blueAccent,\n    highlightedCardColor: Colors.blue.shade100,\n    borderColor: Colors.grey.shade300,\n    deleteIcon: Colors.red,\n    clearAllIcon: Colors.grey,\n    textColor: Colors.black87,\n    dateColor: Colors.grey,\n    timerIcon: Colors.blue,\n    notificationIconColor: Colors.blue,\n    loaderColor: Colors.blue,\n    inboxHeaderColors: InboxHeaderColors(\n        background: Colors.white,\n        titleColor: Colors.black87,\n        headerActionColor: Colors.blue,\n        borderColor: Colors.grey.shade300\n    ),\n    badgeColors: BadgeColors(\n        backgroundColor: Colors.red,\n        color: Colors.white\n    ),\n    cardColors: CardColors(\n        borderColor: Colors.grey.shade300,\n        background: Colors.white,\n        titleColor: Colors.black87,\n        subtitleColor: Colors.grey,\n        descriptionColor: Colors.black54\n    ),\n    tabColors: TabColors(\n        containerBackgroundColor: Colors.white,\n        activeTabBackgroundColor: Colors.blue.shade50,\n        activeTabTextColor: Colors.blue,\n        inactiveTabTextColor: Colors.grey,\n        indicatorColor: Colors.blue\n    ),\n    filterColors: FilterColors(\n        categoryFilterColors: CategoryFilterColors(\n            filterIconBorderColor: Colors.grey.shade300,\n            filterBadgeColor: Colors.blue,\n            filterDropdownBackgroundColor: Colors.white,\n            filterCheckboxCheckedColor: Colors.blue,\n            filterCheckboxUncheckedColor: Colors.grey.shade300,\n            filterActionTextColor: Colors.black87,\n            filterIconColor: Colors.blue,\n            checkIconColor: Colors.white\n        )\n    )\n)\n```\n\n#### Style customization\n\nHere are the custom style options for the notification inbox:\n\n```dart\ncustomStyles: CustomStyles(\n    container: ContainerStyle(\n        padding: EdgeInsets.all(16),\n        decoration: BoxDecoration(\n            color: Colors.white,\n            borderRadius: BorderRadius.circular(8)\n        ),\n        margin: EdgeInsets.all(8)\n    ),\n    cardStyle: CardStyle(\n        cardContainer: ContainerStyle(\n            padding: EdgeInsets.all(16),\n            decoration: BoxDecoration(\n                color: Colors.white,\n                border: Border.all(color: Colors.grey.shade300),\n                borderRadius: BorderRadius.circular(8)\n            )\n        ),\n        cardTitle: TextStyle(\n            fontSize: 16,\n            fontWeight: FontWeight.w600,\n            color: Colors.black87\n        ),\n        cardSubtitle: TextStyle(\n            fontSize: 14,\n            fontWeight: FontWeight.w500,\n            color: Colors.grey\n        ),\n        cardDescription: TextStyle(\n            fontSize: 14,\n            color: Colors.black54\n        ),\n        dateStyle: TextStyle(\n            fontSize: 12,\n            color: Colors.grey\n        ),\n        avatarSize: 40\n    ),\n    appBarStyle: InboxHeaderStyle(\n        headerTextStyle: TextStyle(\n            fontSize: 18,\n            fontWeight: FontWeight.w600,\n            color: Colors.black87\n        ),\n        titlePadding: EdgeInsets.symmetric(horizontal: 16),\n        borderWidth: 1\n    ),\n    notificationIconStyle: NotificationIconStyle(\n        size: 24\n    ),\n    badgeStyle: BadgeStyle(\n        fontSize: 12,\n        size: 20,\n        top: 0,\n        right: 2\n    ),\n    timerIconStyle: TimerIconStyle(\n        size: 20\n    ),\n    deleteIconStyle: DeleteIconStyle(\n        size: 20\n    ),\n    clearAllIconStyle: ClearAllIconStyle(\n        size: 20\n    ),\n    tabStyles: TabStyles(\n        containerStyle: ContainerStyle(\n            padding: EdgeInsets.symmetric(horizontal: 16),\n            margin: EdgeInsets.only(bottom: 8)\n        ),\n        activeTabTextStyle: TextStyle(\n            fontSize: 14,\n            fontWeight: FontWeight.w600,\n            color: Colors.blue\n        ),\n        inActiveTabTextStyle: TextStyle(\n            fontSize: 14,\n            fontWeight: FontWeight.w500,\n            color: Colors.grey\n        ),\n        indicatorSize: 2,\n        indicatorPadding: EdgeInsets.symmetric(horizontal: 16)\n    ),\n    hideTabMargin: HideTabMargin(\n        upper: false,\n        lower: false\n    ),\n    filterStyles: FilterStyles(\n        categoryFilterStyles: CategoryFilterStyles(\n            dropdownTextStyle: TextStyle(\n                fontSize: 14,\n                color: Colors.black87\n            )\n        )\n    )\n)\n```\n\n### 2.4. Filter Configuration\n\nThe filter functionality allows users to filter notifications by categories. Here's how to configure it:\n\n```dart\nSirenInbox(\n    filterParams: FilterParams(\n        categoryFilterParams: CategoryFilterParams(\n            showFilters: true,\n            filterIconWidget: Icon(Icons.filter_list), // Optional custom filter icon\n            hideBadge: false, // Optional hide badge showing number of selected filters\n            categoryFilterStyles: CategoryFilterStyles( // Optional custom styles for category filter\n                dropdownTextStyle: TextStyle(\n                    fontSize: 14,\n                    color: Colors.black87\n                )\n            )\n        )\n    )\n)\n```\n\n#### Filter Features:\n- Custom filter icon support\n- Badge showing number of selected filters (99+ for more than 99 selections)\n- Dropdown with checkbox selection\n- Customizable colors and styles for all filter components\n\n#### Category Filter Styles\nYou can customize the appearance of the category filter dropdown using `CategoryFilterStyles`:\n\n```dart\nCategoryFilterStyles(\n    dropdownTextStyle: TextStyle(\n        fontSize: 14,\n        color: Colors.black87,\n        fontWeight: FontWeight.w500\n    )\n)\n```\n\n| Style Property    | Description                                    | Type      | Default Value                    |\n|------------------|------------------------------------------------|-----------|----------------------------------|\n| dropdownTextStyle| Style for the category text in dropdown        | TextStyle | fontSize: 14, color: Colors.black87 |\n\n## 3. Siren Class\n\nThe `Siren Class` provides utility functions for modifying notifications.\n\n```dart\nSiren.markAsRead(id: 'notification-id');\n```\n\n| Function         | Arguments | Type            | Description                                                          |\n| ---------------- | --------- | --------------- | -------------------------------------------------------------------- |\n| markAsReadByDate | startDate | ISO date string | Sets the read status of notifications to true until the given date   |\n| markAsReadById   | id        | string          | Set read status of a notification to true                            |\n| deleteById       | id        | string          | Delete a notification by id                                          |\n| deleteByDate     | startDate | ISO date string | Delete all notifications until given date                            |\n| markAllAsViewed  | startDate | ISO date string | Sets the viewed status of notifications to true until the given date |\n\n## Example\n\nHere's a basic example to help you get started\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:sirenapp_flutter_inbox/sirenapp_flutter_inbox.dart';\n\nvoid main() {\n  runApp(const MyApp());\n}\n\nclass MyApp extends StatefulWidget {\n  const MyApp({super.key});\n\n  @override\n  State\u003cMyApp\u003e createState() =\u003e _MyAppState();\n}\n\nclass _MyAppState extends State\u003cMyApp\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return SirenProvider(\n        userToken: 'YOUR_USER_TOKEN',\n        recipientId: 'YOUR_RECIPIENT_ID',\n        child: MaterialApp(\n          title: 'Siren Flutter Inbox',\n          theme: ThemeData(\n            colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),\n            useMaterial3: true,\n          ),\n          home: const MyHomePage(title: 'Home Page'),\n        ));\n  }\n}\n\nclass MyHomePage extends StatefulWidget {\n  const MyHomePage({super.key});\n\n  @override\n  State\u003cMyHomePage\u003e createState() =\u003e _MyHomePageState();\n}\n\nclass _MyHomePageState extends State\u003cMyHomePage\u003e {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        backgroundColor: Theme.of(context).colorScheme.inversePrimary,\n        title: Text(''),\n        actions: [\n          Padding(\n            padding: const EdgeInsets.only(right: 8.0),\n            child: Row(\n              children: [\n                SirenInboxIcon(),\n              ],\n            ),\n          ),\n        ],\n      ),\n      body: SirenInbox(),\n    );\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Fsiren-flutter-inbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkeyvaluesoftwaresystems%2Fsiren-flutter-inbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkeyvaluesoftwaresystems%2Fsiren-flutter-inbox/lists"}