Question 76170 in Flutter Question posted in
The official Flutter documentation can be found here.

How to hide Emoji keyboard in flutter?

I want to hide the emoji keyboard when tapped outside of it. But it doesn’t hide. (https://i.stack.imgur.com/XGqjV.png)

I have tried this code. It hides the text keyboard but not the emoji keyboard.

GestureDetector(
        onTap: FocusScope.of(context).unfocus,

and for emoji keyboard

Offstage(
                offstage: !_showEmoji,
                child: SizedBox(
                  height: 300,
                  child: EmojiPicker(
                    textEditingController: _textController,
                    config: Config(
                      bgColor: Colors.grey.shade700,
                      columns: 8,
                      emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
                    ),
                  ),
                ),
              ),
Tags:

2

Answers


  1. 0

    oops, sorry it was wrong.

    did you use EmojiPicker widget on the modal window like showModalBottomSheet? If not, I recommend using a modal window.

    I think if you use EmojiPicker widget using a modal window, then GestureDetector onTap will work.

    For example,

      ...
  TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
      onTap: FocusScope.of(context).unfocus,
      child: Center(
        child: InkWell(
          onTap: () => showModalBottomSheet(
                shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(top: Radius.circular(30))),
                context: context,
                builder: (context) {
                  return EmojiPicker(
                    textEditingController: _textController,
                    config: Config(
                      bgColor: Colors.grey.shade700,
                      columns: 8,
                      // emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
                    ),
                  );
                },
              ),
          child: Text('Test')),
    ),
  ),
);

    }
    }

    Login or Signup to reply.
  2. 0

    There can be a round about to this. You can make a bool for example isShowingEmoji = false, then you can set it to true while opening EmojiPicker, then in your GestureDetector you can use this code to unfocus it.

    onTap:() {
    if(isShowingEmoji){
      Navigator.pop(context);
  } else {
  FocusScope.of(context).unfocus(),
      }
    }

    Note: there can be a good approach to this, this is just a round about.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search