Flutter hide keyboard when icon keyboard is shown

Viewed 598

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:

enter image description here

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?

1 Answers

You can use final _focusNode = FocusNode();

set the focus node to the Textfield widget focusNode: _focusNode, and you can use _focusNode.unfocus() to loose focus when the EmojiPicker is open and FocusScope.of(context).requestFocus(_focusNode); to regain focus to the TextInput

Related