Support notifying soft keyboard visibility updates in Flutter Web apps

[MisterJimson]

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.

[otopba]

Any updates?

[MisterJimson]

I spent some time investigating and could not find a solid approach. So nothing yet.

[esase]

@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

[MisterJimson]

@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]

@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

[cmaccarone]

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.

[MisterJimson]

@cmaccarone can you link to documentation for those events?

From a quick search they seem to be specific to Ionic hybrid apps.

[cmaccarone]

@MisterJimson see my edits

[MisterJimson]

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

[renanyoy]

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