[모아두기] 플러터 웹뷰 자바스크립트 통신

 

 

웹뷰는 별로 좋은 기억이 없어서 반갑지는 않지만, 그래도 상당히 유용한 모듈 입니다.

이거 하나면 화면은 웹으로 다 만들고, 모바일앱은 쉽게 구글과 애플에 배포를 할 수 있으니까요.

 

이미 모바일 웹 화면을 만들어둔 상황이라면 

모바일 앱 개발은 거저 먹는거죠.

 

하지만, 웹뷰는 웹브라우저가 아니라서 신경써야 하는 부분들이 아주 많습니다.

 

대신 장점은 웹뷰를 마치 앱의 화면처럼 여러가지 이벤트와 메소드를 이용하여 제어할 수가 있습니다.

 

그중 정말 멋진 기능, 자바스크립트를 이용하여 웹 화면과 앱이 연동을 할 수 있지요.

웹에서 앱으로, 앱에서 웹으로 이벤트나 데이터를 전달할 방법이 없으면 제대로 된 프로그램을 만들기 너무 힘들어지죠.

 

 

웹에서 앱 기능 호출하기

웹뷰를 만들면서 여러가지 옵션도 넘기고, 이벤트도 등록하는데

여기에 자바스크립트 채널을 만들어 넣으면 된다.

 

자바스크립트 채널은 웹에서 호출할 갯수 만큼 만들어 넣으면 된다.

 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
        // This drop down menu demonstrates that Flutter widgets can be shown over the web view.
        actions: <Widget>[
          NavigationControls(_controller.future),
          SampleMenu(_controller.future),
        ],
      ),
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'https://flutter.dev',
          javascriptMode: JavascriptMode.unrestricted,
          onWebViewCreated: (WebViewController webViewController) {
            _controller.complete(webViewController);
          },
          onProgress: (int progress) {
            print("WebView is loading (progress : $progress%)");
          },
          javascriptChannels: <JavascriptChannel>{
            _webToAppChange(context),
          },
        );
      }),
    );
  }

 

JavascriptChannel _webToAppChange(BuildContext context) {
   return JavascriptChannel(
      name: 'webToAppChange',
      onMessageReceived: (JavascriptMessage message) {
         // ignore: deprecated_member_use
         print("webToAppChange 메시지 : ${message.message}");
      });
}

 

 

앱에서 웹 기능 호출하기

반대방향 호출도 역시 자바스크립트를 통한다.

웹에 자바스크립트 함수를 만들고, 앱에서 호출하면 끝.

 

evaluateJavascript 는 deprecated 되었다고 해서
요즘에는 runJavascriptReturningResult 를 사용해야 한다고 한다.

 

IconButton(
   icon: const Icon(Icons.replay),
   onPressed: !webViewReady
      ? null
      : () {
         controller.evaluateJavascript('appToWeb("red")');
   },
)

 

플러터 앱 개발 초보 기본 입문 - 구글플레이, 앱스토어 배포, 애드몹 - dear abby, kdrama

 

 

리액트 네이티브, 간단한 예제 만들며 기본 개념 잡아 보기 - React Native

[모아두기] 플러터 - 안드로이드, 아이폰 앱 아이콘 쉽게 관리하기

[모아두기] 플러터 강의 영상 - 광고 붙이기, 멋진 UI 만들기

플러터로 모바일 앱과 웹 개발까지 모두 해결해보자