DEV Community

Cover image for Flutter Elegant Notification
Kouki Badr
Kouki Badr

Posted on

Flutter Elegant Notification

Level Up Your App's Notifications:
A Guide (from the owner himself 🤯) to elegant_notification

In today's competitive mobile landscape, every detail matters, and that includes how you communicate with your users. Enter elegant_notification, a powerful Flutter package that injects a touch of class into your app's notification system.

This article dives deep into elegant_notification, exploring its core features, exciting new additions, and how to seamlessly integrate it into your Flutter project.

Core Features that Make Your Notifications Shine

  • Built-in Themes: Out of the box, elegant_notification provides pre-designed themes for success, error, and info messages.

  • Customization: Don't like the pre-built themes? elegant_notification empowers you to fully customize the look and feel of your notifications. From background colors and animation styles to notification position and even adding a progress bar, the possibilities are endless.

  • Animations: Make your notifications stand out with a variety of animation options.

  • Action Stations! Engage your users by adding clickable buttons or widgets to your notifications.

  • Stacked notifications The package offer the possiblity to display notifications in stacked way.

Latest version updates

What elegant notification brings to you with the latest 2.1.1 version:

Customizable borders style (color, radius, stroke...)
Customizable notification shadow

Step-by-Step Guide

Here's a quick guide to get you started:

  1. Add the package to your pubspec.yaml:
dependencies:
  elegant_notification: ^latest_version  # Replace with the latest version number
Enter fullscreen mode Exit fullscreen mode
  1. Import the package in your Dart file:
import 'package:elegant_notification/elegant_notification.dart';
Enter fullscreen mode Exit fullscreen mode

Display a notification with ease:

ElegantNotification.success(
  title: Text('Success!'),
  description: Text('Your data has been updated'),
  animation: AnimationType.fromTop,
)
.show(context);
Enter fullscreen mode Exit fullscreen mode
  1. Custom notification with stacked options:
ElegantNotification(
  title: Text('Success!'),
  description: Text('Your data has been updated'),
  animation: AnimationType.fromTop,
  stackedOptions: StackedOptions(
    key: 'top',
    type: StackedType.same,
    itemOffset: Offset(-5, -5),
  ),
  border: Border(
    bottom: BorderSide(
    color: Colors.green,
    width: 2,
  ),
 ),
 icon: Icon(
   Icons.access_alarm,
   color: Colors.orange,
 ),
 progressIndicatorColor: Colors.orange,
 background: Colors.white,
)
.show(context);
Enter fullscreen mode Exit fullscreen mode

You can imagine what you can do with all this customizations and other attributes (I'll let you unleash your creativity with it)

Head to https://pub.dev/packages/elegant_notification for more in-depth documentation about this package and let me know if you have any questions, issues or suggestions

Top comments (0)