Beginners Guide to Implement the Flutter Emoji Picker Package

At its core, modern application development is all about user experience and delivering personal and relatable interfaces. Emojis have, over time, woven themselves into every digital conversation we have, whether in a chat-based application or a social media post.

Building upon this impactful trend, Flutter, an emerging star in the mobile development arena, has introduced handy packages to incorporate emojis into applications quickly and effectively. One such lightweight emoji package is emoji_picker_flutter , which lets you swiftly implement an emoji picker in your Flutter apps.

This blog will guide you through understanding its use and implementation. But before we embark on that journey, let's briefly familiarize ourselves with Flutter.

What is Flutter?

Developed by Google, Flutter is a top-rated open-source UI toolkit that allows developers to build natively compiled mobile, web, and desktop applications from a single codebase. The unique selling point for Flutter lies in its widget-oriented architecture and speedy development process.

By providing a vast array of both Material Design and Cupertino widgets, Flutter lets developers create responsive, visually appealing applications that offer native performance on both Android and iOS platforms. Flutter shines through its vast Flutter emoji list when infusing life-like characters into these interactive applications.

Role of Emojis in Flutter Apps

Just as the correct punctuation can clarify the meaning of a sentence, a well-placed emoji can provide emotional context to a text message. Their use significantly enhances the immersive nature of the user experience, allowing for an adequately expressive, colorful, and fun conversational session. In a Flutter app, emojis are typically represented as text widgets, and their presentation varies according to the default emoji style of the platform (iOS/Android).

Apart from manually typing an emoji into an input field, one common way to use emojis in apps is by providing an emoji picker. This is where the emoji_picker_flutter package comes into play.

Below is a simple example of how an emoji icon can be displayed using a text widget in a Flutter app:

Copy
1void main() {
2  runApp(MyApp());
3}
4
5class MyApp extends StatelessWidget  {
6  @override
7  Widget build(BuildContext context) {
8    return MaterialApp(
9      home: Scaffold(
10        appBar: AppBar(
11          title: Text('Flutter Emoji Picker'),
12        ),
13        body: Center(
14          child: Text('😀',
15            style: TextStyle(
16              fontSize: 100,
17            ),
18          ),
19        ),
20      ),
21    );
22  }
23}

In this code snippet, the main function void main() calls the runApp function, which takes the MyApp widget. This widget is then rendered on the screen. The emoji icon '😀' is displayed directly in a text widget.

Flutter Emoji Picker 🤩

To enhance a user's engagement and interactivity with your Flutter app, the emoji_picker_flutter package comes as a lightweight, efficient, and easy-to-implement solution. Its selling points are the ease of customization, up-to-date emojis, and quick integration process. Constructed meticulously as an emoji picker widget, this package acquaints users with an emoji picker similar to the one commonly found on mobile phones.

When integrated well, the package can provide an evenly laid-out selection of emojis in a popup layer (or another kind of interface per developers' customization), thus providing an engaging way for users to add emojis within the text.

Adding this package is quite simple. Include emoji_picker_flutter: ^latest package version under dependencies in your pubspec.yaml file:

Copy
1dependencies:
2  flutter:
3    sdk: flutter
4  emoji_picker_flutter: ^1.6.3

Then run the flutter packages get command in your terminal to fetch the package.

Implementing Emoji Picker in Flutter App

Like any other Flutter widget, incorporating the Flutter emoji picker into the application is undemanding and straightforward.

After you've added the emoji_picker_flutter package and run the command flutter packages get, you'll be ready to import the package into your Dart file.

Copy
1import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';

With the package imported, you can now use the Emojipicker widget, which gives you an easy-to-use, interactive emoji keyboard interface.

Using the EmojiPicker widget in your application is as simple as declaring it in your build method:

Copy
1...
2EmojiPicker(
3  onEmojiSelected: (Category category, Emoji emoji){
4    print(emoji);
5  },
6)
7...

In the above snippet, onEmojiSelected is a required callback method that triggers when an emoji is selected. It provides you with the category of emoji and the emoji itself, which you could, for example, print out or add to a text field.

Customizing Flutter Emoji Picker

The package is highly customizable and flexible. This adaptability allows the developer to tweak the appearance and behavior of the emoji picker widget to seamlessly blend into the application.

The EmojiPicker widget comes with numerous properties for customization, such as changing the background color, column count, emojis in each category, category icons, and many more.

Copy
1...
2EmojiPicker(
3  onEmojiSelected: (Category category, Emoji emoji) {
4    // do something with selected emoji
5  },
6  config: Config(
7    columns: 7,
8    bgColor: Color(0xFFF2F3F4),
9    indicatorColor: Colors.blue,
10    iconColor: Colors.grey,
11    iconColorSelected: Colors.blue,
12    progressIndicatorColor: Colors.blue,
13    backspaceIcon: Icons.backspace,
14    categoryIcons: CategoryIcons(),
15    buttonMode: ButtonMode.MATERIAL
16  ),
17)
18...

In the code snippet above, we customize the EmojiPicker widget by altering its default properties using the Config class with the widget. We start by setting columns to 7, rendering seven emojis per row. We then adjust the background color, bgColor, to a light grey. Other properties have also been modified based on preferences.

The categoryIcons is an instance of CategoryIcons, which you can customize to specify custom icons for each emoji category.

Using Emoji Picker Widget

Undoubtedly, the emoji picker widget is the cardinal player in the emoji_picker_flutter package. This widget piles up all the emojis in neatly arranged columns, facilitating a smooth user experience. Every emoji under it belongs to a category guided by the Unicode standard: Smileys and People, Animals and Nature, Food and Drink, Activity, Travel and Places, Objects, Symbols, and Flags.

To further elevate your app's UX/UI, you can customize the category titles with your custom view, which can be done by setting the `customCategoryNames' attribute as follows:

Copy
1...
2EmojiPicker(
3   onEmojiSelected: (Category category, Emoji emoji) {
4      // do something with selected emoji
5   },
6   config: Config(
7      columns: 7,
8      ...
9      customCategoryNames: CategoryNames(
10         recently: 'Frequently used',
11         smileys: 'Smileys & Emotion',
12         animals: 'Animals & Nature',
13         ...
14      ),
15      ...
16   ),
17)
18...

This way, you can set custom names to the emoji categories for the EmojiPicker widget.

To call the emoji picker, you typically use a button or an icon that, when pressed, displays it. This could be done in various ways, from displaying a bottom modal sheet to using a custom dialog or displaying the emoji picker within your layout!

Handling Emoji Selection Events

User interactivity is paramount in application development, and appropriately responding to the user's actions is critical. The emoji_picker_flutter package provides a callback called onEmojiSelected, which triggers each time an emoji is selected. This allows you to handle the emoji selection event accordingly, which typically involves inserting the selected emoji into a text field or sending it directly as a standalone message.

Let's take a look at the code snippet where the selected emoji is inserted into a TextField:

Copy
1class MyApp extends StatefulWidget {
2  @override
3  _MyAppState createState() => _MyAppState();
4}
5
6class _MyAppState extends State<MyApp> {
7  late TextEditingController _controller;
8
9  @override
10  void initState() {
11    super.initState();
12    _controller = TextEditingController();
13  }
14
15  @override
16  Widget build(BuildContext context) {
17    return MaterialApp(
18      home: Scaffold(
19        appBar: AppBar(
20          title: Text('Flutter Emoji Picker'),
21        ),
22        body: Column(
23          children: <Widget>[
24            TextField(controller: _controller),
25            EmojiPicker(
26              onEmojiSelected: (Category category, Emoji emoji) {
27                _controller.text = _controller.text + emoji.emoji;
28              },
29              config: Config(
30                columns: 7,
31                // Specify your custom emoji here
32                emojiPickerConfig: const EmojiPickerConfig(
33                  categoryIcons: CategoryIcons(),
34                ),
35              ),
36            ),
37          ],
38        ),
39      ),
40    );
41  }
42}

In this code, a TextField widget and an EmojiPicker widget are used. When an emoji is picked, the onEmojiSelected callback is called, which appends the selected emoji to the text in the TextField.

How to Improve the Performance of Emoji Picker

Understanding the need for performance optimizations is crucial for applications managing many interfaces or animations, such as an emoji picker. Luckily, the emoji_picker_flutter package embraces performance optimizations for smooth transitions and quicker results.

One of the significant optimizations leveraged here would be using a fixed grid-based Lazy Loading in the implementation:

• The lazy loading grid loads and displays only the emojis that fit the screen, enormously saving on processing power without causing any apparent lack in performance to the end user.

Moreover, Flutter's efficient rendering engine redraws only those parts of the screen that need to be updated, delivering excellent performance despite numerous emojis and their selection states to handle.

While the default implementations already offer fantastic performance, developers always have the freedom to fork or modify the original repo to better optimize the emoji picker for their particular use cases.

Considerations for Different Platforms and Screen Orientations

The emoji_picker_flutter package shines in its versatility and adaptability. It supports various screen orientations and platforms, ensuring a consistent experience across diverse device configurations.

Whether providing a native-feeling emoji picker interface on iOS or Android devices or adjusting the layout for portrait and landscape orientations, the emoji_picker_flutter package covers you. It supports Material and Cupertino (iOS-style) designs that can be easily swapped based on the platform or user preference.

Moreover, the number of emoji columns automatically adjusts itself based on the current screen width, maintaining the optimal layout and overall user experience.

Conclusion

In the fast-paced world of application development, having rich and expressive interfaces can separate the good from the great. Emojis, being at the center of digital expression, have found their way into our daily conversations. The emoji_picker_flutter package lets you easily incorporate these lovable characters into your Flutter applications, enhancing user interaction and enjoyment.

With its easy implementation, comprehensive customizability, and efficient performance, the emoji_picker_flutter package is an exemplary solution for adding an intuitive emoji picker to your application. I hope this blog has acted as a helpful guide, breaking down the process of implementing and using this incredible package. So gear up, start implementing, and bring your Flutter apps to life with the power of emojis! 💙✨