Elegant In App Notification In Flutter
How To Show Cool In App Notification In Flutter?
In this tutorial, we’ll learn how to show cool and sleek animated notifications in flutter — perfect for handling user actions like login, form submission, or any interaction. You will be able to use default template as well as build your own notification that looks so good.
🚀 Final Output Preview
Watch the full implementation in this YouTube tutorial:
📦 Dependencies Used
Add these to your pubspec.yaml:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.8
elegant_notification: ^2.5.0
🎨 Step 1: Create a Constants File
In Constants.dart, define your color palette:
const Color bluePurpleColor = Color(0xff5D5FEF);
const Color primaryColor = bluePurpleColor;
Color greyFont = const Color(0xff737791);
Color greenColor = const Color(0xff00E096);
// ... other colors ...
const Color backgroundColor = Color(0xffFAFBFC);
const Color headingColor = Color(0xff151D48);
🧱 Step 2: Show Basic Notification
Use EleganceNotification.success() constructor in order to show basic predefined notification. pass Text as description and title parameters.
ElegantNotification.success(
title: Text(
'Notification',
style: GoogleFonts.poppins(fontWeight: FontWeight.bold),
),
description: Text('Notification Received'),
).show(context);
🔁 Step 3: Use Interaction Callbacks
You can pass onDismiss and onNotificationPressed callbacks to handle user interaction.
ElegantNotification.success(
title: Text(
'Notification',
style: GoogleFonts.poppins(fontWeight: FontWeight.bold),
),
description: Text('Notification Received'),
onDismiss: (){
//TODO Your logic when notification is dismissed.
},
onNotificationPressed: (){
//TODO Your logic when user clicks on notification.
},
).show(context);
🧪 Step 4: Stacked Notifications
To show stacked notification, just pass StackedNotification Object to stackedNotification parameter like this:
ElegantNotification.success(
title: Text(
'Notification',
style: GoogleFonts.poppins(fontWeight: FontWeight.bold),
),
description: Text('Notification Received'),
stackedOptions: StackedOptions(
key: 'top',
type: StackedType.same,
itemOffset: Offset(-5, -5),
),
).show(context);
🧪 Step 5: Notification Positioning And Animation
To change position of notification and the animation of notification, play around with animation and position parameters of ElegantNotification.
ElegantNotification.success(
title: Text(
'Notification',
style: GoogleFonts.poppins(fontWeight: FontWeight.bold),
),
description: Text('Notification Received'),
stackedOptions: StackedOptions(
key: 'top',
type: StackedType.same,
itemOffset: Offset(-5, -5),
),
position: Alignment.topCenter,
animation: AnimationType.fromTop,
).show(context);
🧪 Step 6: Error and Warning Notifications
ElegantNotification have two more constructor like success, which are error and info. Use it to show for different actions.
ElegantNotification.error(
title: Text(
'Notification',
style: GoogleFonts.poppins(fontWeight: FontWeight.bold),
),
description: Text('Notification Received'),
).show(context);
ElegantNotification.info(
title: Text(
'Notification',
style: GoogleFonts.poppins(fontWeight: FontWeight.bold),
),
description: Text('Notification Received'),
).show(context);
🧪 Step 7: Fully Customize It
Use it without any pre-defined constructor and pass your descreption, title, icon, colors and even animationDuration, duration, etc. You can customize everything.
ElegantNotification(
title: Text(
'Notification!',
style: GoogleFonts.poppins(
fontWeight: FontWeight.bold,
),
),
description: Text('This is notification'),
animationCurve: Curves.easeIn,
animation: AnimationType.fromBottom,
position: Alignment.topCenter,
icon: Icon(FluentIcons.check_20_regular),
toastDuration: Duration(seconds: 3),
//More parameters are there. check official documentation.
).show(context);
📁 Folder Structure (Simplified)
lib/
│
├── Constants.dart
└── HomeScreen.dart
🎉 Conclusion
You now have a fully customizable elegant notification in your flutter project. Use it to provide good user experience.
