How to stack a container over keyboard in Flutter, similar to WhatsApp "more" section in chat

Question

How can I stack a Container over a keyboard similar to WhatsApp more section just like the below gif?

Alternatively, I tried using a bottom sheet, but bottom sheet closed the keyboard and then opened it up.

Iridotomy

Does this answer your question ? Avoiding the On-Screen Keyboard in Flutter – Marriage

No, I don't think so. – Iridotomy

This is possible on Android, check this article here – Athelstan

How can it be done on flutter? like a hybrid for both ios and android? – Iridotomy

Answer 1

Unfortunately as other answers have said if you really want this you have to use a Custom In-App Keyboard, even though it's a lot of work.

Drawing over the keyboard is indeed possible on Android, but it is not possible at all on iOS. If you check the same functionality in WhatsApp on iOS it does not do that animation since iOS does not allow it.

The issue here is that the keyboard is controlled by the phone's operating system so Flutter is not allowed to render over it, just as you can't render over the status bar at the top of the screen.

Lindgren

Answer 2

This article at Medium titled "Custom In-App Keyboard in Flutter" by someone called "Suragch" might help you.

Custom In-App Keyboard in Flutter by Suragch

Oconnell

I checked out this, but I do not want to create the keyboard from scratch it would be very cumbersome. I want a way out to overlay something above the default keyboard – Iridotomy

this would have limitations too. Like what if the user had a customized keyboard? Their autosaved custom sentences? etc. There is too much variable to handle to be worth it. – Stoughton

Answer 3

The best solution for this is hiding the keyboard using the focus node:

 void _unFocusKeyboard() {
    FocusScope.of(context).unfocus();
 }

Clinker

Answer 4

I think is an animation to a "Container" at the bottom of the screen.

Marinetti