Toast Notifications for Flutterflow : Short and Sweet!

INTRODUCTION

So, as is my custom I was strolling throught the FF community help section to help fellow members in my free time and I came across Harsh Majithia 's post where he needed help with a toast notification. That was a feature I also needed and didn't like that FF community didn't have one natively. So here we go! A custom toast notification for your application, one less feature for Inactive Member.

We will be using the Elegant Notifications Package

We will create Success, Error, Info and a custom "Warning" notification, to show the power of this package. We also will be showing the powerful feature of Flutterflow to add other Actions into Custom Actions. Such that when a user closes our toast notification Icon, we can do something (e.g. navigate to a new page, or update a state, or make a database request in-app! using FF native actions). So with that let's dive in.

GENERAL ACTION SETUP

Create 4 custom actions you can name them warningNotification, errorNotification, successNotification & infoNotification. The code for error, success and info are all natively supported by the package, so I will only display one setup, just repeat the EXACT same thing for the other 2 (I will show you what to change). The code for Warning is custom, the package allows you to design whatever type of toast you want, and I used the Warning notification to show you how to do it, so I will share that as well.

SUCCESS NOTIFICATION (NOTE : this is the SAME setup you'd use for info and error notifications)

1. Create the action successNotification, check "include build context" and give it 5 inputs:
   title {string, non-nullable},
   description {string, non-nullable},
   duration {integer, non-nullable},
   onClosePressed {action, nullable},
   onAnimationEnd {action, nullable} <= the last two inputs in italics are optional, but they help you if you want to be able to 'do something' when your user closes the notification (e.g. in my own app, I am alerting Doctors/Nurses so I play a sound after the notification)

2. Your setup will look like this if done correctly:
   

   

3. Then add the code below into your code editor (replace EVERYTHING below the FF imports, do NOT touch the FF imports):
   

   Copy

   import 'package:elegant_notification/elegant_notification.dart';
   import 'package:elegant_notification/resources/arrays.dart';
   
   Future successNotification(
     BuildContext context,
     String title, // title of the notification
     String description, // description text in the notification
     int duration, // duration in seconds
     Future<dynamic> Function()? onClosePressed, // allow action to be done on 'close' pressed
     Future<dynamic> Function()?
         onAnimationEnd, // allow action to be done on when duration elapses
   ) async {
   // It's same EXACT code for Success, Error & Info notifications
   // Just change it to ElegantNotification.info for info toasts
   // Just change it to ElegantNotification.error for error toasts
     ElegantNotification.success(
       title: Text(title),
       description: Text(description),
       animationDuration: Duration(seconds: duration),
       onCloseButtonPressed: onClosePressed,
       onProgressFinished: onAnimationEnd,
     ).show(context);
   }

4. Add the following Pubspec dependency to your action:
   elegant_notification: ^1.11.2

   
   

5. That's it! You are done with adding Success, Info and Error toasts 🚀✨🤗

CREATING A "WARNING" CUSTOM NOTIFICATION

For the sake of even more customization we would look at the code for a 'Warning' toast Notification which if custom-made supported by the package, you can define which color you want, which icon you want to show, even put custom images/icons if you want; check the comments in the code. The action setup is EXACTLY as above just the code differs, so let's look at it:

import 'package:elegant_notification/elegant_notification.dart';
import 'package:elegant_notification/resources/arrays.dart';

Future warningNotification(
  BuildContext context,
  String title, // title of the notification
  String description, // description text in the notification
  int duration, // duration in seconds
  Future<dynamic> Function()? onClosePressed, // action done on 'close' pressed
  Future<dynamic> Function()?
      onAnimationEnd, // action done on when duration elapses
) async {
// see here that ElegantNotification without any 'dot something' in front
  ElegantNotification(
    title: Text(title),
    description: Text(description),
    animationDuration: Duration(seconds: duration),
    icon: Icon(
// you can specify which icon you want, here I am using Material icons Library
      Icons.access_alarm,
      color: Colors.orange,
    ),
// here you specify the colour of the progress bar, I am using Orange
    progressIndicatorColor: Colors.orange,
// these two lines below allow actions to be triggered on close pressed or on end
    onCloseButtonPressed: onClosePressed, 
    onProgressFinished: onAnimationEnd,
  ).show(context);
}

IN-APP USAGES

Now let us see how we can chain even more actions to our Custom Action.

So that's the end of our custom tutorial. See you in the next one. Happy building! 🚀✨💙

Serge Middendorf. Harsh Majithia (here you go mate). Joseph Pollone you may find toasts useful too if you haven't any already.

FOR THOSE WHO WOULD LIKE A SINGLE CONCISE SINGLE ACTION THAT DOES ALL THE ABOVE:

import 'package:elegant_notification/elegant_notification.dart';
import 'package:elegant_notification/resources/arrays.dart';

ElegantNotification createNotification(
  String type,
  String message,
) {
  final toastDuration = Duration(seconds: 7);
  final double toastHeight = 50;
  final double toastWidth = 400; //package default
  final double iconSize = 30;
  final double fontSize = 14;

  IconData iconData;
  Color color;

  switch (type) {
    case 'success':
      iconData = Icons.check_circle;
      color = Colors.green;
      break;
    case 'warning':
      iconData = Icons.report_problem;
      color = Colors.orange;
      break;
    case 'error':
      iconData = Icons.error;
      color = Colors.red;
      break;
    default:
      iconData = Icons.info;
      color = Colors.blue;
      break;
  }

  return ElegantNotification(
    description: Text(
      message,
      style: TextStyle(
        fontSize: fontSize,
      ),
    ),
    toastDuration: toastDuration,
    progressIndicatorColor: color,
    showProgressIndicator: false,
    height: toastHeight,
    width: toastWidth,
    animation: AnimationType.fromTop,
    icon: Icon(iconData, color: color, size: iconSize),
  );
}

Future showToastNotification(
  BuildContext context,
  String message,
  String? notificationType,
) async {
  ElegantNotification notification = createNotification(
    notificationType ?? 'info',
    message,
  );

  notification.show(context);
}

Shoutout to Joseph Pollone and his Github copilot sidekick for the beautiful summary! 😅🚀