stacked_notification_cards
A Flutter implementation of iOS style stacked notifications.
Features
- Given notifications can be stacked one upon the other (iOS style)
- Notifications can be expanded with fan animation.
- Individual notification card can slide either left or right
- Individual cards or the entire stack of cards can be dismissed via slide action.
- It’s possible to use multiple
StackedNotificationCardswithin aColumn.
Make sure to wrap StackedNotificationCards in SingleChildScrollView if using within a Column.
Install
In the pubspec.yaml of your flutter project, add the following dependency:
dependencies:
stacked_notification_cards: <latest_version>
Add then following import:
import 'package:stacked_notification_cards/stacked_notification_cards.dart';
Getting Started
Example:
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);
},
),
Demo
Contributions
Feel free to contribute to this project.
- If you find a bug or want have a new feature request, please file an issue.
- If you fixed a bug or implemented a feature, please send a pull request.
