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.
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(),
),
);
}
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 |
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: 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
)
)
)
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(),
);
}
}
