Confetti animation with Flutter in Sendbird Chat

Introduction

A much-loved feature in chat is confetti animation, wherein a burst of confetti is displayed when the word ‘congratulations’ or ‘congrats’ is received in a chat message. We previously documented how to implement confetti animation for React apps in this article. In this tutorial, we’ll talk about how to implement this feature with Flutter.

The code in this article is a progression from a previous Flutter sample app created using Sendbird’s Flutter SDK and DashChat, a third-party chat UI plugin. If this is your first time implementing Sendbird Chat in a Flutter app, we recommend first checking out this tutorial to understand how to build a Flutter chat app with Sendbird and 3rd-party UIs.

In this tutorial, we’ll first see how to create a base special effects class, then a custom subclass for displaying confetti, and finally how to add a controller to hold and run all of our special effects subclasses. The complete code for this tutorial is intended to allow for quick integration into an existing project and flexibility to add/ remove your own custom effects with minimum impact on any existing code.

Please note that you will benefit most from this tutorial if you have had some prior experience with Flutter.

Let’s get started! 💻

Requirements

• Flutter 2.5 or higher installed
• Sendbird SDK package
• DashChat 2 plugin
• Confetti plugin

Architecture

To keep our code relatively simple, portable and extensible, we’re going to start off with a Flutter controller object that stores a list of custom objects. This controller can be initialized and retained by any stateful or stateless widget that builds a User Interface (UI).

When a chat message is passed into this controller, the controller will pass the message to its stored list of custom subclasses. Each of these subclasses will check messages for particular keywords, and if found, play its effect. They will then notate that a user has seen the animation and update its Sendbird message metadata so that the same effects aren’t duplicated when users reopen the chat screen.

Now let’s dive into the implementation details.

Part 1. Base class

First, create a file named sendbird_sfx.dart which will be our base special effects class. It will have functions for:

• Returning a UI widget
• Starting an effect
• Stopping an effect
• Disposing of any objects related to running the effect

To support these functions, add the following properties:

• metaKey – A unique key to differentiate special effects
• keywords – The list of keywords to trigger the special effect
• isCaseSensitive – Set whether the list of keywords above should be checked for case sensitivity. False means casing will be ignored.
• expiresIn – A duration property for setting a threshold for how long this effect should be applicable. For example, if you want to trigger an effect when someone sends “Happy anniversary!”, but not if that message was originally sent a month ago, the duration can be set to within a month.

Now let’s add a constructor to make sure the required properties are provided during init:

Add the following functions that should be overwritten by future subclasses:

The following is a code block that can be optionally overwritten:

Copy the following internal functions to handle boilerplate operations and syncing with Sendbird’s system:

See Github for the finished code for the sendbird_sfx.dart class.

Part 2. Custom subclass

Now we’ll create a subclass of SendbirdSFX for displaying confetti whenever the keywords “congrats” or “congratulations” are detected.

Create a new class called confetti_sfx.dart making sure it extends the above base class.

For this effect to work, we’ll be using the open-source confetti package. After adding confetti to your pubspec.yaml dependencies section, add import ‘package:confetti/confetti.dart’; to the ConfettiSFX class.

Initialize the confetti package to a property to retain it:

final ConfettiController _confettiController = ConfettiController(duration: const Duration(seconds: 10));

Then add it as the controller for the package’s confetti widget in an override of the ui() function:

Now, add the _confettiController calls to the play, stop and dispose functions:

Part 3. Adding a controller

Next, create another file named sendbird_sfx_controller.dart. This is a convenience class to hold and run all of our special effects subclasses. Add the import statement:

import "sendbird_sfx.dart";

So that we can add our single list property:

List<SendbirdSFX> specialEffects;

Add a constructor to optionally pass in a list of special effects subclasses at init time:

SendbirdSFXController({this.specialEffects = const []});

Now create the following functions to pass message strings and dispose commands to it and each of its special effect subclasses:

The complete code for the sendbird_sfx_controller.dart class can be found on Github.

Finally, we’ll add these classes to the group_channel_view.dart class from our earlier sample to tie it in with the messages sent and received via Sendbird.

Add these import statements:

Then in the _GroupChannelViewState block, add a new property to retain our SendbirdSFXController:

Instead of modifying the existing body() block, we’ll wrap it into a stack widget so we can add all the special effects UI above it. Create an sfxStackedBody function that returns a widget with the following arguments:

Then update the build() function to call this instead of the original body block, passing in the _sfxController property,the pre-existing _messages property, and the Sendbird group channel reference:

Now, when the class’s _messages property is updated and sets off a UI rebuild, updated messages will be processed by the _sfxController to determine if the confetti effect should trigger. If a word matches one within the list of keywords, the confetti effect will play the effect.

NOTE: This is the easiest way to integrate the message checking, but not the most efficient as past messages will always be rechecked. Implement the onMessageRecieved() and onMessageUpdated() callbacks (more info here) and move the SendbirdSFXController’s checkAndTriggerAll() all function to those functions instead.

The complete code for the updated group_channel_view.dart class can be found on Github.

Conclusion

And that’s it! You did it! 🚀 Now that you know how to add confetti to your Flutter app, you can make your own chat-triggered effects – other animations, audio effects, and even other blocks of code!

Enjoy experimenting with your own chat-triggered special effects! Happy chat building!✌️👨‍💻