Flutter hide emoji keyboard when system keyboard shows

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?

user_16475983 · Answer

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: [
                          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: [
                                  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,
                          ),
                        ),
                      ),
                    )
                  ],
                ),
              )
            ),
          ],
        ),
      ],
    ),
  ),

Flutter hide emoji keyboard when system keyboard shows

1 Answers