TextField Widget with emoji filter
In flutter, we use the text field widget to take inputs from users. There are different types of inputs
we take from users included characters, number of special characters, and emojis.
In this documentation, we talk about emojis. there is a package in dart packages called emoji_picker.
With the use of the emoji picker, we make our custom emoji picker keyboard but we can't use it with a text field. In this documentation, I guide you on how we can do it.
The widget tree structure of widgets.
First Screen:-
------Column-------
-----ListView
-----------------------
-----TextField
-----------------------
------Keyboard
-----Column---------
After clicking the emoji icon in the text field at the place of the suffix icon.
--------Column--------
-----ListView
--------------------------
-----TextField
--------------------------
-----Emoji panel
--------------------------
-----Keyboard
--------------------------
For hiding keyboard use this line SystemChannels.textInput.invokeMethod('TextInput.hide');.
------Column------
-----ListView
---------------------
-----TextField
---------------------
-----Emoji panel
---------------------
For hiding the emoji panel and showing the keyboard again click on the emoji or keyboard icon to hide the emoji panel and for showing the keyboard again SystemChannels.textInputs.invokeMethod('TextInput.show');.
how it look like:-
The full code explanation is here:
import 'package:emoji_picker_2/emoji_picker_2.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class DemoBlogDart extends StatefulWidget {
@override
State<DemoBlogDart> createState() => _DemoBlogDartState();
}
class _DemoBlogDartState extends State<DemoBlogDart> {
var _emojiVisible = false;
TextEditingController _editingController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Row(
children: [
Container(
height: 50,
width: MediaQuery.of(context).size.width * 0.9,
alignment: Alignment.center,
// color: Colors.red,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const SizedBox(
width: 10,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
color: Colors.grey[300],
),
height: 42,
width: MediaQuery.of(context).size.width * 0.6,
child: TextField(
onSubmitted: (value) {},
// autofocus: true,
controller: _editingController,
cursorColor: Colors.grey,
decoration: InputDecoration(
suffix: _emojiVisible == true
? IconButton(
onPressed: () {
SystemChannels.textInput
.invokeMethod('TextInput.show');
setState(() {
_emojiVisible = false;
});
},
icon: const Icon(Icons.keyboard),
)
: IconButton(
onPressed: () {
setState(() {
_emojiVisible = true;
});
SystemChannels.textInput
.invokeMethod('TextInput.hide');
},
icon: const Icon(
Icons.emoji_emotions_outlined),
),
contentPadding: const EdgeInsets.symmetric(
vertical: 2, horizontal: 8),
hintText: "Say Something...",
hintStyle: const TextStyle(
color: Colors.grey,
fontWeight: FontWeight.normal),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey[300]),
borderRadius: BorderRadius.circular(20)),
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.grey[300]),
borderRadius: BorderRadius.circular(20))),
)),
const SizedBox(
width: 10,
),
OutlinedButton(
style: ButtonStyle(
shape: MaterialStateProperty.all(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20))),
backgroundColor: MaterialStateProperty.all(
Theme.of(context).accentColor)),
onPressed: () {},
child: const Text(
"Send",
style: TextStyle(color: Colors.white),
)),
const SizedBox(
width: 10,
)
],
),
),
],
),
Visibility(
visible: _emojiVisible,
child: EmojiPicker2(
rows: 3,
columns: 7,
recommendKeywords: ["racing", "horse"],
numRecommended: 10,
onEmojiSelected: (emoji, category) {
print(emoji);
setState(() {
_editingController.text += emoji.emoji;
});
},
),
)
],
),
),
);
}
}
For more information on packages, widgets and solutions take dive into the flutterStuff.
