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
- Lightweight Package
- Faster Loading
- Null-safety
- Completely customizable
- Material Design and Cupertino mode
- Emojis that cannot be displayed are filtered out (Android Only)
- Optional recently used emoji tab
- 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.6import '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.