How to use Emoji Picker in Flutter

In this article, we will explore the Emoji Picker in flutter using the emoji_picker_package. With the help of the package, we can easily achieve a flutter emoji picker. For this, we should know some basic information about what an Emoji Picker in flutter is. A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories. The emoji library provides a visual representation of some kind of emotion, object, or symbol, which provides a variety of icons. The Emoji library is used for any modern communication app. Your smartphone’s text messaging or social networking apps like Facebook, Instagram, Twitter, etc. have an option of emoji icon.

Related: Date And Time Picker In Flutter

Key features 

1. Lightweight Package
2. Faster Loading
3. Null-safety
4. Completely customizable
5. Material Design and Cupertino mode
6. Emojis that cannot be displayed are filtered out (Android Only)
7. Optional recently used emoji tab
8. Skin Tone Support

onEmojiSelected	called when the emoji is selected
onBackspacePressed	called when the backspace button is pressed
config	for Customization

Let’s take an example of how we can implement the Emoji Picker in our flutter application.

Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies :

dependencies:
  emoji_picker: ^1.0.6

import 'package:flutter/material.dart';
import 'package:vlogpost/Widget/messageWidget.dart';
import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';

class EmojiScreen extends StatefulWidget {
  const EmojiScreen({Key? key}) : super(key: key);

  @override
  State<EmojiScreen> createState() => _EmojiScreenState();
}

class _EmojiScreenState extends State<EmojiScreen> {
  FocusNode focusNode = FocusNode();
  bool isEmojiVisible = false;
  TextEditingController messagecontroller = TextEditingController();
  final messages = <String>[];
  final message = '';
  @override
  void initState() {
    focusNode.addListener(() {
      if (focusNode.hasFocus) {
        setState(() {
          isEmojiVisible = false;
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Emoji Picker'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              reverse: true,
              physics: const BouncingScrollPhysics(),
              children: messages
                  .map((message) => MessageWidget(message: message))
                  .toList(),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              controller: messagecontroller,
              minLines: 1,
              focusNode: focusNode,
              maxLines: 4,
              decoration: InputDecoration(
                prefixIcon: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 5),
                  child: isEmojiVisible
                      ? InkWell(
                          onTap: focusNode.requestFocus,
                          child: const Icon(
                            Icons.keyboard_rounded,
                            color: Colors.purple,
                            size: 25,
                          ))
                      : InkWell(
                          onTap: () {
                            focusNode.unfocus();
                            focusNode.canRequestFocus = false;
                            setState(() {
                              isEmojiVisible = !isEmojiVisible;
                            });
                          },
                          child: const Icon(
                            Icons.emoji_emotions_outlined,
                            color: Colors.blue,
                            size: 25,
                          ),
                        ),
                ),
                suffixIcon: InkWell(
                  onTap: () {
                    setState(() {
                      messages.insert(0, messagecontroller.text);
                    });

                    messagecontroller.clear();
                  },
                  child: const Icon(
                    Icons.send,
                    color: Colors.blue,
                    size: 25,
                  ),
                ),
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(16),
                ),
              ),
            ),
          ),
          SizedBox(
            height: MediaQuery.of(context).padding.bottom + 10,
          ),
          isEmojiVisible
              ? SizedBox(
                  height: 265,
                  child: Offstage(
                    offstage: !isEmojiVisible,
                    child: EmojiPicker(
                      onEmojiSelected: (category, emoji) {
                        setState(() {
                          messagecontroller.text =
                              messagecontroller.text + emoji.emoji;
                        });
                      },
                    ),
                  ),
                )
              : const SizedBox(),
        ],
      ),
    );
  }
}

Here in the above code, we have used a Customwidget name as MessageWidget which has the following line of code.

// ignore_for_file: file_names

import 'package:flutter/material.dart';

class MessageWidget extends StatelessWidget {
  final String message;

  // ignore: use_key_in_widget_constructors
  const MessageWidget({
    required this.message,
  });

  @override
  Widget build(BuildContext context) {
    const radius = Radius.circular(12);
    const borderRadius = BorderRadius.all(radius);

    return Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [
        Container(
          padding: const EdgeInsets.all(12),
          margin: const EdgeInsets.all(12),
          decoration: BoxDecoration(
            color: Colors.grey[200],
            borderRadius: borderRadius
                .subtract(const BorderRadius.only(bottomRight: radius)),
          ),
          child: Text(
            message,
            style: const TextStyle(color: Colors.black),
            textAlign: TextAlign.end,
          ),
        ),
      ],
    );
  }
}

Meanwhile, when we run this application in the emulator or device, we should get the UI similar to the screenshot below:

This is the UI screen when we tap the emoji icon button in textformfield.

Thank you for reading the Guide about How to implement the emoji Picker in Flutter.