Flutter消息收件箱管理插件sirenapp_flutter_inbox的使用

Flutter消息收件箱管理插件sirenapp_flutter_inbox的使用

概述

<code>sirenapp_flutter_inbox</code> 是一个全面且可定制的 Flutter UI 工具包，用于显示和管理通知。本文档提供了有关如何安装、配置和有效使用该 SDK 的详细信息。

1. 安装

要安装 <code>sirenapp_flutter_inbox</code> 包：

1. 打开你的 <code>pubspec.yaml</code> 文件。
2. 添加 <code>sirenapp_flutter_inbox</code> 到你的依赖项。
3. 在终端中运行 <code>flutter pub get</code> 来安装包。

dependencies:
  sirenapp_flutter_inbox: ^x.x.x

2. 配置

2.1 初始化

初始化 SDK 并传递用户令牌和接收者 ID。将提供者包裹在应用程序的根组件周围。

import 'package:sirenapp_flutter_inbox/sirenapp_flutter_inbox.dart';

void main() {
  runApp(
    SirenProvider(
        userToken: 'YOUR_USER_TOKEN',
        recipientId: 'YOUR_RECIPIENT_ID',
        child: MyApp(),
    ),
  );
}

2.2 配置通知图标

配置通知图标后，下一步是设置通知图标。

此部件包含一个通知图标及其徽章以显示未读通知的数量。

SirenInboxIcon()

通知图标参数

以下是图标部件的可选参数：

主题定制

以下是一些可用的主题选项：

theme: CustomThemeColors(
    notificationIconColor: Colors.purple,
    badgeColors: BadgeColors(
    color: Colors.greenAccent, textColor: Colors.black),
)

样式定制

以下是通知图标的一些自定义样式选项：

customStyles: CustomStyles(
    notificationIconStyle: NotificationIconStyle(size: 20),
    badgeStyle: BadgeStyle(fontSize: 9, size: 5),
)

2.3 配置通知收件箱

收件箱是一个分页列表视图，用于显示通知。

SirenInbox(
    headerParams: HeaderParams(showBackButton: true),
    cardParams: CardParams(hideAvatar: false),
    onError: (error) {
        // 处理错误
    },
)

通知收件箱参数

以下是 <code>Siren Inbox</code> 小部件的参数：

主题定制

以下是可用的一些主题选项：

theme: CustomThemeColors(
            primary: Colors.blue,
            highlightedCardColor: Colors.blueAccent,
            textColor: Colors.green,
            cardColors: CardColors(
                titleColor: Colors.grey,
                subtitleColor: Colors.grey,
            ),
            inboxHeaderColors: InboxHeaderColors(
                titleColor:  Colors.redAccent,
                headerActionColor: Colors.purpleAccent,
                borderColor: Colors.cyanAccent
            ),
        ),

样式选项

以下是通知收件箱的一些自定义样式选项：

customStyles: CustomStyles(
    container: ContainerStyle(
        padding: EdgeInsets.all(20),
        decoration: BoxDecoration(color: Colors.yellow)),
    cardStyle: CardStyle(
        cardContainer: ContainerStyle(
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
                color: Colors.yellow,
                border: Border.all(color: Colors.red))),
            cardTitle: TextStyle(fontSize: 22, fontWeight: FontWeight.w800),
            cardSubtitle:
                TextStyle(fontSize: 20, fontWeight: FontWeight.w700),
            cardDescription:
                TextStyle(fontSize: 18, fontWeight: FontWeight.w600),
            dateStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
                avatarSize: 30,
        ),
    appBarStyle: InboxHeaderStyle(
        headerTextStyle:
        TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
                titlePadding: EdgeInsets.symmetric(horizontal: 30),
        borderWidth: 5),
    timerIconStyle: TimerIconStyle(size: 30),
    deleteIconStyle: DeleteIconStyle(size: 30),
    clearAllIconStyle: ClearAllIconStyle(size: 30),
),

3. Siren 类

<code>Siren Class</code> 提供了用于修改通知的实用函数。

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

示例

以下是一个基本示例，帮助你开始使用。

import 'package:flutter/material.dart';
import 'package:sirenapp_flutter_inbox/sirenapp_flutter_inbox.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SirenProvider(
// 获取与 Siren 团队联系以获得必要的令牌和 ID 进行集成。
      userToken: 'YOUR_USER_TOKEN',
      recipientId: 'YOUR_RECIPIENT_ID',
      child: MaterialApp(
        title: 'Siren',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFFEB5017)),
          useMaterial3: true,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _selectedIndex == 0
            ? const Text('Siren Icon')
            : const Text('Siren Inbox'),
        actions: _selectedIndex == 0
            ? []
            : [
                IconButton(
                    onPressed: () {
                      Siren.deleteByDate(
                          startDate: DateTime.now().toUtc().toIso8601String());
                    },
                    icon: const Icon(Icons.delete_forever)),
                IconButton(
                    onPressed: () {
                      Siren.markAsReadByDate(
                          startDate: DateTime.now().toUtc().toIso8601String());
                    },
                    icon: const Icon(Icons.mark_email_read)),
              ],
      ),
      body: _selectedIndex == 0
          ? const SirenIconWidget()
          : const SirenWindowWidget(),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.notifications, size: 35),
            label: 'Icon',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list, size: 35),
            label: 'Window',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

class SirenIconWidget extends StatefulWidget {
  const SirenIconWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  State<SirenIconWidget> createState() => _SirenIconWidgetState();
}

class _SirenIconWidgetState extends State<SirenIconWidget> {
  Icon? notificationIcon;
  bool? hideBadge;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const Spacer(),
          Center(
            child: SirenInboxIcon(
              notificationIcon: notificationIcon,
              darkMode: true,
              hideBadge: hideBadge,
              onError: (error) {
                // print('This is the inApp error message ${error.message}');
              },
            ),
          ),
          Text(
            'You are viewing ${notificationIcon == null ? 'default' : 'custom'} icon',
          ),
          Text(
            'You are ${hideBadge == false ? 'viewing' : 'not viewing'} notification count',
          ),
          const Spacer(),
          Padding(
            padding: const EdgeInsets.all(16),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      notificationIcon = notificationIcon == null
                          ? const Icon(
                              Icons.notification_add,
                              color: Colors.black,
                            )
                          : null;
                    });
                  },
                  child: Text(
                    notificationIcon == null ? 'Custom Icon' : 'Default Icon',
                  ),
                ),
                ElevatedButton(
                  onPressed: () {
                    setState(() {
                      hideBadge = hideBadge == false ? true : false;
                    });
                  },
                  child: Text(
                    hideBadge == true ? 'Show Count Badge' : 'Hide Count Badge',
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class SirenWindowWidget extends StatelessWidget {
  const SirenWindowWidget({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          SirenInbox(
            onError: (error) {
              // print('This is the inApp error message ${error.message}');
            },
          ),
        ],
      ),
    );
  }
}