Open MisterJimson opened 4 years ago
Any updates?
I spent some time investigating and could not find a solid approach. So nothing yet.
@MisterJimson if we cannot listen the keyboard changes in the web it makes this plugin useless there. Maybe you should consider to remove the badge of a compatibility with the web here - https://pub.dev/packages/flutter_keyboard_visibility ?? I spent many time understanding why it does not work in the web despite the plugin's description says another
@esase its setup like this so your app doesn't break on web if you use this library, it works as normal but just returns false. Can add a note to the readme.
@esase its setup like this so your app doesn't break on web if you use this library, it works as normal but just returns false. Can add a note to the readme.
Yes I understand that, my point was that the web is not implemented yet, and yeah a note would be nice
What if we listened to some native javascript browser events like this
window.addEventListener('native.showkeyboard', keyboardShowHandler); window.addEventListener('native.hidekeyboard', keyboardHideHandler);
Then add some listeners to those?
(edit)
I couldn't get those events to work but this one does
window.visualViewPort.addEventListener('resize', (event) {});
https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport/resize_event
but this doesn't seem to be a very stable route.
@cmaccarone can you link to documentation for those events?
From a quick search they seem to be specific to Ionic hybrid apps.
@MisterJimson see my edits
Thanks. Yes we tried using resize before but we couldn't find a consistent enough implementation.
https://github.com/MisterJimson/flutter_keyboard_visibility/pull/106/files
I managed to find something for the web using
class VisualViewport {
final _ctrlSizeChanged = StreamController<Size>.broadcast();
final _ctrlScrollChanged = StreamController<Offset>.broadcast();
Stream<Size> get onSizeChanged => _ctrlSizeChanged.stream;
Stream<Offset> get onScrollChanged => _ctrlScrollChanged.stream;
VisualViewport() {
window.visualViewport?.onScroll.listen((event) {
_ctrlScrollChanged.add(Offset(
(window.visualViewport?.offsetLeft ?? 0).toDouble(),
(window.visualViewport?.offsetTop ?? 0).toDouble()));
});
window.visualViewport?.onResize.listen((event) {
_ctrlSizeChanged.add(Size((window.visualViewport?.width ?? 0).toDouble(),
(window.visualViewport?.height ?? 0).toDouble()));
});
}
Size get size => Size((window.visualViewport?.width ?? 0).toDouble(),
(window.visualViewport?.height ?? 0).toDouble());
Offset get scroll => Offset(
(window.visualViewport?.offsetLeft ?? 0).toDouble(),
(window.visualViewport?.offsetTop ?? 0).toDouble());
}
the resize event is fired when keyboard appears
any update?
No, the web plugin is still a stub. I have not found a reliable implementation.
i have some problems with phone with android version 9, dont work
There is a non-standard method that can be used on higher versions of Android mdn link chrome link caniuse link
Seems like an obvious feature for mobile web apps.
Not sure if there is much we could help with for physical keyboards / desktop web apps.