popover icon indicating copy to clipboard operation
popover copied to clipboard

Popover should adjust its size when keyboard is shown/hidden

Open rasmk opened this issue 2 years ago • 2 comments

Native iOS popovers track the software keyboard events and reposition themselves if necessary, when the keyboard is shown/hidden. If the popover overlaps with the keyboard it is:

  • moved above the keyboard, if there is enough room to show it
  • resized to fit the area over the keyboard, if the original popover was too big to fit

Your popover implementation does a great job in showing the popovers that do not have input fields. E.g. lists of choices. But if popover needs to collect some user's input, we still have to use flutter dialog. It could be great if we could use popovers, as they feel more at home, when on iOS.

I do not know if it helps, but we use keyboard_avoider in our application to make the parts that should not overlap with keyboard auto-resize. It is abandoned and not-null safe. But perhaps could be used as a reference.

rasmk avatar Apr 22 '22 14:04 rasmk

@rasmk Thank you for sharing an idea. I believe we should hide a popover. I'll release a new version soon and will try to implement it.

minikin avatar Jul 20 '22 20:07 minikin

I think, hiding the popover does not really solve the problem. In the scenario: the popover contains input field, the user taps the field, keyboard shows up, hiding the popover would not really be what user expects. In the meantime I followed a bit the implementation of the keyboard avoider. And I think I understand it quite well - it registers as binding observer WidgetsBinding.instance.addObserver(this);, which, among others, is called when the keyboard is shown/hidden. Then in didChangeMetrics it checks if the keyboard is shown by using MediaQuery and checking window insets). Then some calculation to see if the widget overlaps with the keyboard, resize animation and scrolling the focused element into view.

Popover is somewhat more complex to follow for me, so I am not in a position to propose a pull request. But could help explaining implementation parts of keyboard avoider if requested.

Meanwhile we switched to dialogs in our project. But having the support for the keyboard events could be a nice feature of the popover.

There is actually one more quirk with the keyboard - if the original widget is resized (keyboard avoider) when the keyboard is shown, and the button that the popover was attached to (the popover triangle) moves, the triangle does not point to it anymore. No idea if this would be easy or hard to fix. But that is less of an issue than resizing the popover I described in OP.

rasmk avatar Aug 10 '22 15:08 rasmk

Changing the size of Popover on the keyboard is shown or hidden doesn't sound like a great UX/UI.

minikin avatar Sep 05 '22 15:09 minikin