플러터 웹뷰에서 물리 키보드 방향키가 동작하지 않는다.

메인 컴포넌트가 웹뷰로 구성된 페이지에서 물리 키보드의 방향키가 동작하지 않는다는 문의를 받았습니다.
재현해보니 정말 동작하질 않았습니다.

아이패드같은 태블릿으로 앱을 사용할 때 키보드를 쓰는 사용자는 충분히 불편하겠다 싶어 분석결과, 아래와 같이 조치했습니다.
물론 플러터 엔진의 문제로 보여 임시 조치이며, webview_flutter와 flutter_inappwebview 공통적으로 발생하는 문제입니다.

문제가 발생하는 코드

당연히 일반적인 구현입니다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    	child: SafeArea(
        	child: InAppWebView(
                ...
                ..
                .
            ),
        ),
    );
}

조치한 코드

WebView 위젯(webivew_flutter, flutter_inappwebview 모두) 위에 Focus 위젯을 감싸줍니다.
이 Focus 위젯에서 방향키 동작의 상하좌우, 그리고 탭키 등을 통해 키보드로 사용할 수 있는 동작들을 SkipRemainingHandlers 처리해주어 다른 핸들러로 전파하지 않도록 설정하면 됩니다.

* 물론 임시적으로 조치한 내용이기 때문에 사이드 이펙트가 있을 수 있습니다.

  @override
  Widget build(BuildContext context) {
    return Scaffold(
    	child: SafeArea(
        	child: Focus(
                  onKey: (node, event) {
                    if (!kIsWeb) {
                      if ({
                        LogicalKeyboardKey.arrowLeft,
                        LogicalKeyboardKey.arrowRight,
                        LogicalKeyboardKey.arrowUp,
                        LogicalKeyboardKey.arrowDown,
                        LogicalKeyboardKey.tab,
                      }.contains(event.logicalKey)) {
                        return KeyEventResult.skipRemainingHandlers;
                      }
                    }
                    return KeyEventResult.ignored;
                  },
                  child: InAppWebView(
                  	...
                    ..
                    .
                  ),
              ),
        ),
    );
}

 

요즘의 플러터 후기

플러터가 그래도 초기에 비해 많이 안정화 됐다고 생각하지만, 아직 RN을 따라잡기엔 멀었다고 생각합니다.
개발의 편의성은 RN에 비해 충분히 좋지만 지원하는 컴포넌트, 이런 사소한 이슈들이 굉장히 많습니다.

특히 웹뷰는 거의 버려진 수준인 듯 합니다.
Logical Keyboard가 올라올 경우, 웹뷰 상단에 알 수 없는 영역이 추가되는 등...

이러다 앵귤러가 되려나..?