Flutter hide emoji keyboard when system keyboard shows - flutter

Question

I'm trying to hide the emoji keyboard when the system keyboard shows and vice versa. What I'm currently have is when the system keyboard is opened then I click on the emoji icon, the emoji keyboard shows on top of the system keyboard like so:
I'm using the emoji_picker_flutter: ^1.1.2 package, and here is the code:
Offstage(
offstage: !emojiShowing,
child: Padding(
padding: const EdgeInsets.all(10),
child: SizedBox(
height: 250,
child: EmojiPicker(
onEmojiSelected: (Category category, Emoji emoji) {
_onEmojiSelected(emoji);
},
onBackspacePressed: _onBackspacePressed,
config: Config(
columns: 8,
// Issue: https://github.com/flutter/flutter/issues/28894
emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
verticalSpacing: 0,
horizontalSpacing: 0,
initCategory: Category.SMILEYS,
bgColor: Theme.of(context).scaffoldBackgroundColor,
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)),
),
),
),
Is there any solution?

Answer 1

Add this :
bool emojiShowing = false;
var chatMessageController = TextEditingController();
_onEmojiSelected(Emoji emoji) {
chatMessageController
..text += emoji.emoji
..selection = TextSelection.fromPosition(
TextPosition(offset: chatMessageController.text.length));
setState(() {
_send = true;
});}
_onBackspacePressed() {
chatMessageController
..text = chatMessageController.text.characters.skipLast(1).toString()
..selection = TextSelection.fromPosition(
TextPosition(offset: chatMessageController.text.length));}
And in your body, you need to do this:
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
ChatStream(widget.chatRoomId),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 15, left: 15, top: 0,bottom: 2),
height: 60,
child: Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(35.0),
boxShadow: [
BoxShadow(
offset: Offset(0, 3),
blurRadius: 5,
color: Colors.grey)
],
),
child: Row(
children: <Widget>[
IconButton(
onPressed: () {
setState(() {
emojiShowing = !emojiShowing;
});
if (emojiShowing != false) {
FocusScope.of(context).unfocus();
}
},
icon: const Icon(
Icons.face,
),
),
//IconButton(
// icon: Icon(Icons.face), onPressed: () {}),
Expanded(
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
controller: chatMessageController,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration.collapsed(
hintText: 'Envoyer un message...',
),
onTap: () {
if (emojiShowing != false) {
setState(() {
emojiShowing = !emojiShowing;
});
}
},
onChanged: (value){
if(value.isNotEmpty){
setState(() {
_send = true;
});
}else{
setState(() {
_send = false;
});
}
},
onSubmitted: (value){
//you can send message by pressing enter
if(value.length>0){
sendMessage();
}
},
),
),
IconButton(
icon: Icon(Icons.photo_camera),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.attach_file),
onPressed: () {},
)
],
),
),
),
_send == true
? Row(
children: [
SizedBox(width: 15),
Container(
padding: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor, shape: BoxShape.circle),
child: InkWell(
child: Icon(
Icons.send,
color: Colors.white,
),
onTap: sendMessage,
),
),
],
)
: Text('')
],
),
),
Offstage(
offstage: !emojiShowing,
child: SizedBox(
height: 250,
child: EmojiPicker(
onEmojiSelected: (Category category, Emoji emoji) {
_onEmojiSelected(emoji);
},
onBackspacePressed: _onBackspacePressed,
config: Config(
columns: 8,
emojiSizeMax: 28 * (Platform.isIOS ? 1.30 : 1.0), // Issue: https://github.com/flutter/flutter/issues/28894
verticalSpacing: 0,
horizontalSpacing: 0,
gridPadding: EdgeInsets.zero,
initCategory: Category.RECENT,
bgColor: Colors.white,
indicatorColor: Theme.of(context).primaryColor,
iconColor: Colors.grey,
iconColorSelected: Theme.of(context).primaryColor,
progressIndicatorColor: Theme.of(context).primaryColor,
backspaceColor: Theme.of(context).primaryColor,
skinToneDialogBgColor: Colors.white,
skinToneIndicatorColor: Colors.grey,
enableSkinTones: true,
showRecentsTab: true,
recentsLimit: 32,
noRecents: const Text(
'Pas d\'émojis récents',
style: TextStyle(fontSize: 20, color: Colors.black26),
textAlign: TextAlign.center,
),
tabIndicatorAnimDuration: kTabScrollDuration,
categoryIcons: const CategoryIcons(),
buttonMode: ButtonMode.MATERIAL,
),
),
),
)
],
),
)
),
],
),
],
),
),