stacked_notification_cards

iOS风格堆叠通知的Flutter实现。

特点

  • 给定的通知可以一个接一个地堆叠（iOS风格）
  • 通知可以通过扇形动画展开。
  • 单个通知卡可以向左或向右滑动
  • 可以通过滑动操作取消单个卡片或整个卡片堆。
  • 可以在Column中使用多个StackedNotificationCards。

如果在Column中使用，请确保将StackedNotificationCards包装在SingleChildScrollView中。

安装

在您的 flutter 项目的 pubspec.yaml 文件中，添加以下依赖项

dependencies:
  stacked_notification_cards: <latest_version>

添加以下导入

import 'package:stacked_notification_cards/stacked_notification_cards.dart';

入门

示例

            StackedNotificationCards(
              shadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.25),
                  blurRadius: 2.0,
                )
              ],
              type: 'Message',
              notifications: [..._listOfNotification],
              cardColor: Color(0xFFF1F1F1),
              padding: 16,
              headerTitle: Text(
                'Notifications',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              headerShowLess: Text(
                'Show less',
                style: TextStyle(
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                  color: Colors.deepPurple,
                ),
              ),
              onTapClearAll: () {
                setState(() {
                  _listOfNotification.clear();
                });
              },
              headerClearAllButton: Icon(Icons.close),
              clearAllStacked: Text('Clear All'),
              clear: Text('clear'),
              view: Text('view'),
              onTapClearCallback: (index) {
                print(index);
                setState(() {
                  _listOfNotification.removeAt(index);
                });
              },
              onTapViewCallback: (index) {
                print(index);
              },
            ),

演示

贡献

欢迎您为本项目做出贡献。

  • 如果您发现错误或有新功能请求，请提交一个问题。
  • 如果您修复了错误或实现了功能，请发送一个拉取请求。

GitHub

查看 Github