A Flutter implementation of iOS style stacked notifications.

Related tags

Templates dart flutter
Overview

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 StackedNotificationCards within a Column.

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.
You might also like...

Arissendpushntfctns - Send Push notifications with Flutter and Firebase messaging II

Arissendpushntfctns - Send Push notifications with Flutter and Firebase messaging II

Push notifications with Firebase messaging II Send push notifications on Android

Feb 11, 2022

Flutter Push Notifications

Flutter Push Notifications

Flutter Push Notifications Flutter applications implementing push notifications.

Oct 17, 2022

Create flutter project with all needed configuration in two minutes (theme, localization, connect to firebase, FCM, local notifications, safe API call, error handling, animation..etc)

Create flutter project with all needed configuration in two minutes (theme, localization, connect to firebase, FCM, local notifications, safe API call, error handling, animation..etc)

Flutter GetX Template Flutter Getx template to make starting project fast and easy . Introduction We all face the same problem when we want to start a

Nov 19, 2022

Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. Maintainer: @escamoteur

Get It - Simple direct Service Locator that allows to decouple the interface from a concrete implementation and to access the concrete implementation from everywhere in your App. Maintainer: @escamoteur

❤️ Sponsor get_it This is a simple Service Locator for Dart and Flutter projects with some additional goodies highly inspired by Splat. It can be used

Nov 21, 2022

Iosish indicator - 🍎 Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Iosish indicator - 🍎 Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Iosish indicator - 🍎 Create awesome and simple iOS style floating indicator which can be found when silent/sleep mode switched on Flutter.

Apr 1, 2022

A very easy-to-use navigation tool/widget for having iOS 13 style stacks.

cupertino_stackview A very easy-to-use navigation tool/widget for having iOS 13 style stacks. It is highly recommended to read the documentation and r

Nov 18, 2022

A highly customisable and simple widget for having iOS 13 style tab bars.

cupertino_tabbar A highly customisable and simple widget for having iOS 13 style tab bars. It is highly recommended to read the documentation and run

Oct 31, 2022

A Flutter implementation of splash screen. Supports Android and IOS.

A Flutter implementation of splash screen. Supports Android and IOS.

your_splash A Flutter implementation of splash screen. Supports Android and IOS. Features Supports splash screen with the Future callback Supports spl

Sep 27, 2022
Comments
  • Unable to customize NotificationCard leading

    Unable to customize NotificationCard leading

    When trying to modify the leading of the NotificationCard, it does not seem to make any difference.

    NotificationCard( date: DateTime.now().subtract( const Duration(minutes: 4), ), leading: const Icon( Icons.abc_outlined, size: 48, ), title: 'OakTree 2', subtitle: 'We believe in the power of mobile computing.', ),

    Here it is expected to have a different leading icon, but the default icon is still shown.

    It would be great to have the ability to modify the leading Widget.

    Thanks in advance!

    opened by AndreasLyngholm 2
Releases(v0.1.0-dev.2)
Owner
OakTree Apps
Mobile First Development Agency
OakTree Apps
Ahmed Elsayed 151 Nov 23, 2022
Pre-defined setup to start developing flutter project with stacked architecture.

un_official A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Aashish Jha 0 Dec 27, 2021
Flutterlistpaginationstacked - Pagination in flutter using Stacked Architecture

Pagination in flutter using Stacked Architecture. Link to Readable Tutorial on H

Ademola Babs 0 May 5, 2022
Stacked UI design system built for Flutter.

TODO: Put a short description of the package here that helps potential users know whether this package might be useful for them. Features TODO: List w

Lewis Eccles 0 Jan 2, 2022
Flutter plugin to render stacked page view

Stacked Page View! pub.dev/stacked_page_view Hi! This package will create stacked page view in your flutter app. it's as lightweight as it can get ⚡ ⚡

Navin Kodag 11 Nov 9, 2022
This project base on stacked state management.

stacked_state_mamagement The new code base. Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

DanhDue ExOICTIF 1 Jan 7, 2022
Neumorphic style - Example app with Flutter that displays a neumorphic style container

Flutter Neumorphic Style Example App Example app with Flutter that displays a ne

Piyush Nagpal 2 Mar 24, 2022
Plugin to implement APNS push notifications on iOS and Firebase on Android.

apns Plugin to implement APNS push notifications on iOS and Firebase on Android. Why this plugin was made? Currently, the only available push notifica

null 0 May 14, 2022
A starter example of a Flutter + Mobx + Notifications

flutter-example A starter example of a Flutter + Mobx + Firebase Nofitications Before Debug $ flutter packages pub run build_runner watch --delete-con

Jonatas Walker 10 Feb 3, 2021
Flutter push notifications with Firebase Cloud Messaging.

Notify A Flutter sample app demonstrating how to send push notifications using Firebase Cloud Messaging (FCM). Screenshots Notification while the app

hebaabdelwhab 0 Dec 24, 2021