> ## Documentation Index
> Fetch the complete documentation index at: https://docs.trysiren.io/llms.txt
> Use this file to discover all available pages before exploring further.
# 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:
```yaml theme={null}
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.
```dart theme={null}
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.
```dart theme={null}
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.
```dart theme={null}
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
```dart theme={null}
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
```dart Theme Customization theme={null}
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
)
)
)
```
```dart Style Customization theme={null}
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
```dart theme={null}
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 createState() => _MyAppState();
}
class _MyAppState extends State {
@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 createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
@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(),
);
}
}
```