Emoji Picker In Flutter
The flutter widget is built using a modern framework. It is like a reaction. In this, we start with the widget to create any application. Each component in the screen is a widget. The widget describes what his outlook should be given his present configuration and condition. Widget shows were similar to its idea and current setup and state. Flutter is a free and open-source tool to develop mobile, desktop, web applications with a single code base.
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 number picker. So let’s get started.
emoji_picker | Flutter Package
Run this command: With Flutter: $ flutter pub pub add emoji_picker This will add a line like this to your package’s…pub.dev
Table Of Contents :
Emoji Picker :
The emoji library provides a visual representation of some kind of emotion, object or symbol, in which it provides a variety of icons. 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.
Some Basic properties.
- rows — The rows attribute is used to show the number of rows icons in the keyboard.
- columns — The columns attribute is used to show the number of columns icons in the keyboard.
- numRecommended — The maximum number of emojis to be recommended.
- bgColor — Use the bgColor property to change the background color of the keyboard.
Demo Module :
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:
emoji_picker: ^0.1.0Step 2: Importing
import 'package:emoji_picker/emoji_picker.dart';Step 3: Run flutter package get
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
Code Implementation :
You need to implement it in your code respectively:
Create a new dart file called emoji_picker_demo.dart inside the libfolder.
First of all, we will take the stack widget which we have wrapped from the WillPopScope, have taken the column widget inside the stack widget, designed a text field inside it and took some icon and at the click of the icon, the emoji icon will open.
Now we have implemented the isShowSticker inside the initState() method which is false by default.
bool isShowSticker;
@override
void initState() {
super.initState();
isShowSticker = false;
}
Now we will implement the emoji picker in which we have given row size three and columns size intake, the icon has reconded value ten and buttonMode type is material.
Widget buildSticker() {
return EmojiPicker(
rows: 3,
columns: 7,
buttonMode: ButtonMode.MATERIAL,
recommendKeywords: ["smile", "fruit"],
numRecommended: 10,
onEmojiSelected: (emoji, category) {
print(emoji);
},
);
}
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File :
import 'package:flutter/material.dart';
import 'package:emoji_picker/emoji_picker.dart';
class EmojiPickerDemo extends StatefulWidget {
@override
_EmojiPickerDemoState createState() => _EmojiPickerDemoState();
}
class _EmojiPickerDemoState extends State<EmojiPickerDemo> {
bool isShowSticker;
@override
void initState() {
super.initState();
isShowSticker = false;
}
Future<bool> onBackPress() {
if (isShowSticker) {
setState(() {
isShowSticker = false;
});
} else {
Navigator.pop(context);
}
return Future.value(false);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Emoji Picker Demo"),
),
body:WillPopScope(
child:Stack(
alignment:Alignment.bottomCenter,
children: [
Column(
mainAxisAlignment:MainAxisAlignment.end,
children: <Widget>[
Container(
child: Row(
mainAxisAlignment:MainAxisAlignment.end,
children: <Widget>[
// Button send image
Material(
child: new Container(
margin: new EdgeInsets.symmetric(horizontal: 1.0),
child: new IconButton(
icon: new Icon(Icons.image),
onPressed: () {},
color: Colors.blueGrey,
),
),
color: Colors.white,
),
Material(
child: new Container(
margin: new EdgeInsets.symmetric(horizontal: 1.0),
child: new IconButton(
icon: new Icon(Icons.face),
onPressed: () {
setState(() {
isShowSticker = !isShowSticker;
});
},
color: Colors.blueGrey,
),
),
color: Colors.white,
),
// Edit text
Flexible(
child: Container(
child: TextField(
style: TextStyle(color: Colors.blueGrey, fontSize: 15.0),
decoration: InputDecoration.collapsed(
hintText: 'Type your message...',
hintStyle: TextStyle(color: Colors.blueGrey),
),
),
),
),
// Button send message
Material(
child: new Container(
margin: new EdgeInsets.symmetric(horizontal: 8.0),
child: new IconButton(
icon: new Icon(Icons.send),
onPressed: () {},
color: Colors.blueGrey,
),
),
color: Colors.white,
),
],
),
width: double.infinity,
height: 50.0,
decoration: new BoxDecoration(
border: new Border(
top: new BorderSide(color: Colors.blueGrey, width: 0.5)),
color: Colors.white),
),
// Sticker
(isShowSticker ? buildSticker() : Container()),
],
),
],
),
onWillPop: onBackPress
),
);
}
Widget buildSticker() {
return EmojiPicker(
rows: 3,
columns: 7,
buttonMode: ButtonMode.MATERIAL,
recommendKeywords: ["racing", "horse"],
numRecommended: 10,
onEmojiSelected: (emoji, category) {
print(emoji);
},
);
}
}
Conclusion :
In this article, I have explained an Emoji Picker in a flutter, which you can modify and experiment with according to your own. This little introduction was from the Emoji Picker from our side.
I hope this blog will provide you with sufficient information in Trying up the Emoji Picker in your flutter project. We will show you the Emoji Picker is? and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
