Animated Emoji in Flutter app with lottie package, Noto Emoji

mobile version

Liven Up Your Flutter App: Interactive Emoji with Lottie Animations.

The easiest way on how to add animated emoji into your Flutter app using lottie package.

web version

Packages Used:

This tutorial utilizes two Flutter packages:

• lottie: This is the core package for integrating Lottie animations in your Flutter app. It allows you to load and display Lottie animations from various sources.
• (Optional) font_awesome_flutter: While not strictly required for this tutorial, this package might be useful if you want to include additional icon sets beyond emoji. It provides a vast collection of vector icons that can be used in your app. I’ll use it in appBar section. (full source code in my repo, link at the end of this tutorial).

Lottie Animation Sources:

The tutorial demonstrates using Lottie animations from two different sources:

• Network URLs: You can find a wide variety of free Lottie animation files online, including emoji animations. Popular resources include LottieFiles (https://lottiefiles.com/) and Adobe Animate. This tutorial will guide you on how to utilize these animations by specifying their network URLs within your code.
• Downloaded Lottie Files (JSON): If you have specific Lottie animation files downloaded as .json files, you can also use them in your app. The tutorial will explain how to integrate these local files by referencing their paths within the Flutter project.

Black and White Emojis:

The tutorial offers two approaches for representing the base (inactive) state of the emoji button:

• Images: You can use black and white image assets stored within your Flutter project’s assets folder. These images will represent the initial state of the emoji before animation is triggered.
• Noto Emoji Google Fonts: This is an alternative approach for obtaining black and white emoji representations. These characters will be displayed in black and white by default.

Key Points:

• The choice between network URLs or downloaded Lottie files depends on your preference and animation source.
• You can use either image assets or Noto Emoji fonts for the black and white emoji representations based on your project setup and desired aesthetics.
• The tutorial will guide you through both methods, providing flexibility in how you build your interactive emoji buttons.

Let’s start:

Emojis are a ubiquitous part of modern communication, adding personality and expression to messages. In Flutter, you can take them a step further by incorporating animated emoji that bring life and interactivity to your app. This guide explores using the lottie package to effortlessly integrate these dynamic emojis.

In the realm of Flutter development, enhancing user engagement and injecting personality into your app are key considerations. Animated emoji offer a delightful way to achieve this. This comprehensive guide will unveil the power of the lottie package, enabling you to seamlessly integrate animated emoji into your Flutter applications.

The source code at the end of the article.

Getting Started with lottie

1. Package Installation:

• Open your terminal and navigate to your Flutter project directory.
• Execute the following command to incorporate lottie into your project's dependencies:

flutter pub add lottie

2. Importing the Package:

• In the Dart file where you intend to use animated emoji, import the lottie package:

import 'package:lottie/lottie.dart';

Using Lottie.network for Animated Emoji:

There are two primary ways to display Lottie animations: loading from a network URL or using a local asset file. This article focuses on using network URLs for flexibility.

1. Obtaining Lottie Animations:

2. Network URL:

• Once you have your Lottie animation URL, you can use the Lottie.network constructor to display it within your widget tree.
• For example:

final emojiUrl = 
  'https://assets.com/path/to/your/emoji.json'; // Replace with your URL

Lottie.network(
  emojiUrl,
  height: 100, // Adjust height as needed
  width: 100, // Adjust width as needed
  fit: BoxFit.fill, // Ensures animation fills the container
),

In my app at first I added the row with black-white images of emojis & after animated each image. Clicking the image triggers animation, transforming it into a colourful and dynamic emoji.

To realise this let’s create two custom widgets: EmojiiButton() & RowAnimatedEmojiiWidget()

inactive black-white, active — colourful

Firstly create custom EmojiButton() widget:

While Lottie.network provides a basic way to display animations, this guide delves into creating interactive emoji buttons with two visual states:

• Static black-and-white image (inactive state): This represents the base emoji.
• Animated color emoji (active state): Tapping the button triggers animation.

If EmojiButton() isn’t active will display black-white image:

black-white image

If this button is active, will display animated emoji:

row from emoji

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class EmojiButton extends StatefulWidget {
  final String? imageEmojii;
  final String? animatedEmojii;
  
  const EmojiButton({
    super.key,
    this.imageEmojii,
    this.animatedEmojii
    });

  @override
  State<EmojiButton> createState() => _EmojiiButtonState();
}

class _EmojiiButtonState extends State<EmojiButton> {
  bool isActive = true;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          isActive = !isActive;
        });
      },
      borderRadius: BorderRadius.circular(999),
      child: isActive
          ? Container(
              width: 55,
              height: 55,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage(widget.imageEmojii ?? 'assets/emoji/very_sad.png'),
                      fit: BoxFit.fill),
                  borderRadius: BorderRadius.circular(999)),
            )
          : Lottie.network(
              widget.animatedEmojii ?? 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f979/lottie.json',
              height: 50,
              width: 50,
              fit: BoxFit.fill,
            ),
    );
  }
}

EmojiiButton (StatefulWidget):

This class represents the button itself. It takes two optional string properties:

• imageEmojii: Path to the static emoji image asset (e.g., a black and white emoji).
• animatedEmojii: URL for the corresponding Lottie animation representing the emoji.
• An isActive flag controls whether to display the static image or the animation.
• Tapping the InkWell triggers a state change, toggling between the two visual states.

Next, you’ll need to create folder emoji inide folder assets and download 5 black-white images to use them later in the RowAnimatedEmojiiWidget() :

!Don’t forgot to add this folder into pubspec.yaml

• Ensure you have the EmojiiButton() widget defined and imported correctly in your project.

RowAnimatedEmojiiWidget — Widget Composing Emoji Buttons:

• We’ll create a custom RowAnimatedEmojiiWidget() widget that displays a row of EmojiiButton() instances.
• This widget doesn’t need to be stateful as it simply composes other widgets.

import 'package:flutter/material.dart';
import 'package:flutter_animated_emoji/widgets/emoji_button.dart';

class RowAnimatedEmojiiWidget extends StatelessWidget {
  const RowAnimatedEmojiiWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            EmojiButton(
              imageEmojii: 'assets/emoji/very_sad.png',
              animatedEmojii: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f979/lottie.json',
            ),
            EmojiButton(
              imageEmojii: 'assets/emoji/sad.png',
              animatedEmojii: 'https://lottie.host/34515189-eca2-4a13-8af7-8762d84c7799/g50SftkCeN.json',
            ),
            EmojiButton(
              imageEmojii: 'assets/emoji/neutral.png',
              animatedEmojii: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f610/lottie.json',
            ),
            EmojiButton(
              imageEmojii: 'assets/emoji/happy.png',
              animatedEmojii: 'https://fonts.gstatic.com/s/e/notoemoji/latest/263a_fe0f/lottie.json',
            ),
            EmojiButton(
              imageEmojii: 'assets/emoji/very_happy.png',
              animatedEmojii: 'https://fonts.gstatic.com/s/e/notoemoji/latest/1f600/lottie.json',
            ),
          
          ],
        ),
      
      ],
    );
  }
}

Take a look into this code:

• The RowAnimatedEmojiiWidget() is now a StatelessWidget because it doesn't manage any internal state.
• It simply returns a Row widget with mainAxisAlignment.spaceAround to distribute the EmojiiButton() instances evenly.
• Each EmojiiButton() instance is configured with specific properties for the static image and animated emoji URLs.

Remember:

• Replace the emoji image and animation URLs with your actual resources.

Possible troubleshooting:

macOS needs you to request a specific entitlement in order to access the network. To do that open macos/Runner/DebugProfile.entitlements and add the following key-value pair.

<key>com.apple.security.network.client</key>
<true/>

error on macOS emulator

Then do the same thing in macos/Runner/Release.entitlements.

<key>com.apple.security.network.client</key>
<true/>

fix error

You need to stop and restart the app for the changes to take effect.

app run on macOS emulator

See also Setting up entitlements in the documentation.

There are numerous resources online where you can find free Lottie animation files for emojis. A popular option is LottieFiles:

1. Example of using animating Noto Emoji from noto-emoji-animation

2) Example of using lottie files from this website LottieFiles

Example of using lottie files from LottieFiles

3) Example of using animated colourful emoji from downloaded lottie.json file & black-white from Noto Emoji Google font.

• Create folder lottie and download lottie .json files

folder lottie with .json files

• Download Noto Emoji font from here => Noto Emoji

Add folder fonts and extract here from downloaded zip folder file: NotoEmoji-VariableFont_wght.ttf

installed NotoEmoji Google font

Now update our EmojiButton() widget

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

class EmojiButton extends StatefulWidget {
  final String? imageEmoji;
  final String? animatedEmoji;
  
  const EmojiButton({
    super.key,
    this.imageEmoji,
    this.animatedEmoji
    });

  @override
  State<EmojiButton> createState() => _EmojiiButtonState();
}

class _EmojiiButtonState extends State<EmojiButton> {
  bool isActive = true;

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        setState(() {
          isActive = !isActive;
        });
      },
      borderRadius: BorderRadius.circular(999),
      child: isActive
          ? Text(
            widget.imageEmoji ?? '',
            style: const TextStyle(
              fontSize: 50,
              fontFamily: 'NotoEmoji',
              color: Colors.grey
            ),)
          : Lottie.asset(
              widget.animatedEmoji ?? 'assets/lottie/happy.json',
              height: 50,
              width: 50,
              fit: BoxFit.fill,
            ),
    );
  }
}

Choose needed emoji here Glyphs , copy and paste it as a property of imageEmoji variable:

By following these steps and incorporating Lottie animations, you can transform your Flutter app’s emojis from static icons to engaging and interactive elements. With a little creativity, you can add a touch of personality and delight to your user experience.

Bonus: the source code at my github repo flutter_animated_emoji