When I click the emoji icon, the emoji keyboard is shown. But then I click on the textfield without closing the emoji keyboard, the text keyboard is displayed on the bottom of the emoji keyboard like the picture above:
What I want is whenever the emoji keyboard is shown, then the text keyboard is hidden. And when the text keyboard is shown, then the emoji keyboard is hidden.
Here is my code :
bool emojiShowing = false;
_onEmojiSelected(Emoji emoji) {
inputTextController
..text += emoji.emoji
..selection = TextSelection.fromPosition(
TextPosition(offset: inputTextController.text.length));
}
_onBackspacePressed() {
inputTextController
..text = inputTextController.text.characters.skipLast(1).toString()
..selection = TextSelection.fromPosition(
TextPosition(offset: inputTextController.text.length));
}
final _focusNode = FocusNode();
final _textFieldKey = UniqueKey();
The textfield controller:
TextEditingController inputTextController = new TextEditingController();
The icon button code:
IconButton(
onPressed: () {
setState(() {
emojiShowing = !emojiShowing;
if (emojiShowing) {
_focusNode.unfocus();
}
else {
FocusScope.of(context).requestFocus(_focusNode);
}
});
},
icon: Icon(
Icons.tag_faces,
color: Colors.grey,
),
),
And the emoji code:
Offstage(
offstage: !emojiShowing,
child: SizedBox(
height: 250,
child: EmojiPicker(
onEmojiSelected: (Category category, Emoji emoji) {
_onEmojiSelected(emoji);
},
onBackspacePressed: _onBackspacePressed,
config: Config(
columns: 7,
// Issue: https://github.com/flutter/flutter/issues/28894
emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
verticalSpacing: 0,
horizontalSpacing: 0,
initCategory: Category.SMILEYS,
bgColor: Colors.white,
indicatorColor: Colors.blue,
iconColor: Colors.grey,
iconColorSelected: Colors.blue,
progressIndicatorColor: Colors.blue,
backspaceColor: Colors.blue,
skinToneDialogBgColor: Colors.white,
skinToneIndicatorColor: Colors.grey,
enableSkinTones: true,
showRecentsTab: true,
recentsLimit: 28,
noRecentsText: 'No Recents',
noRecentsStyle: const TextStyle(
fontSize: 20, color: Colors.black26),
tabIndicatorAnimDuration: kTabScrollDuration,
categoryIcons: const CategoryIcons(),
buttonMode: ButtonMode.MATERIAL)),
),
),
Added key: _textFieldKey, to the TextField too.
Is there any solution?
