Siren Flutter Inbox #

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.

1. Installation #

To install the sirenapp_flutter_inbox package,

1. Open your pubspec.yaml file.
2. Add sirenapp_flutter_inbox to your dependencies.
3. Run flutter pub get in your terminal to install the package.

2. Configuration #

2.1 Initialization #

Initialize the sdk with user token and recipient id. Wrap the provider around your App's root.

import 'package:sirenapp_flutter_inbox/sirenapp_flutter_inbox.dart';

void main() {
  runApp(
    SirenProvider(
      config: SirenConfig(
        userToken: 'your_user_token',
        recipientId: 'your_recipient_id',
      ),
      child: MyApp(),
    ),
  );
}

2.2 Configure notification icon #

Once the provider is configured, next step is to configure the notification icon

This widget consists of a notification icon along with a badge to display the number of unviewed notifications.

SirenInboxIcon()

Arguments for notification icon

Below are optional arguments available for the icon widget:

Theme customization

Here are the available theme options:

theme: CustomThemeColors(
    badgeBackgroundColor: Colors.deepPurpleAccent,
    iconColor: Colors.white,
    badgeColor: Colors.white)

Style customization

Here are the custom style options for the notification icon:

customStyles: SirenStyleProps(
    iconStyle: IconStyle(size: 35),
        badgeStyle: BadgeStyle(
        fontSize: 10,
        size: 18,
        inset: 1,
        top: 2,
        right: 0,
    ))

2.3. Configure notification inbox #

Inbox is a paginated list view for displaying notifications.

SirenInbox(
  theme: customTheme,
  title: 'Notifications',
  hideHeader: false,
  darkMode: true,
  onError: (error) () {
    // Handle error
  },
);

Arguments for the notification inbox

Given below are the arguments of Siren Inbox Widget.

Theme customization

Here are the available theme options:

theme: CustomThemeColors(
    backgroundColor: const Color.fromRGBO(218, 223, 254, 1),
    highlightedCardBorderColor: const Color.fromRGBO(103, 58, 183, 1),
    highlightedCardColor: const Color.fromRGBO(171, 242, 251, 1),
    borderColor: const Color.fromRGBO(133, 146, 230, 1),
    deleteIcon: const Color.fromRGBO(103, 58, 183, 1),
    clearAllIcon: const Color.fromRGBO(103, 58, 183, 1),
    textColor: const Color.fromRGBO(0, 0, 0, 1),
    dateColor: const Color.fromRGBO(0, 0, 0, 1),
    timerIcon: const Color.fromRGBO(133, 146, 230, 1),
    badgeBackgroundColor: const Color.fromRGBO(103, 58, 183, 1),
    badgeColor: const Color.fromRGBO(103, 58, 183, 1),
    iconColor: const Color.fromRGBO(0, 0, 0, 1),
    inboxTitleColor: const Color.fromRGBO(0, 0, 0, 1),
    ),

Style options

Here are some of the custom style options for the notification inbox:

customStyles: SirenStyleProps(
    cardAvatarContainer: BoxDecoration(
        border: Border.all(
            color: AppColors.primaryBlue,
            width: 1,
            ),
            shape: BoxShape.circle,
        ),
        container: BoxDecoration(
            border: Border.all(
              color: Colors.black,
        ),
    ),
    contentContainer: BoxDecoration(
        border: Border.all(
            color: Colors.red,
        ),
    ),
    subHeaderText: TextStyle(
        color: Colors.red,
    ),
    cardTitle: TextStyle(
        color: Colors.black,
    ),
    dateStyle: TextStyle(
        color: Colors.green,
    ),
)

3. Siren Class #

The Siren Class class provides utility functions for modifying notifications.

Siren.markAsRead(id: 'notification-id');

4. Error Codes #

Given below are all possible error codes thrown by the package:

Example #

Here's a basic example to help you get started

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-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: Text(''),
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 8.0),
            child: Row(
              children: [
                SirenInboxIcon(),
              ],
            ),
          ),
        ],
      ),
      body: SirenInbox(),
    );
  }
}