본문 바로가기

모아두기

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

 

 

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

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

 

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

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

 

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

 

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

 

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

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

 

 

웹에서 앱 기능 호출하기

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

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

 

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

 

@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

리액트 네이티브가 나쁘진 않지만, 저는 두가지 이유로 플러터를 선호 합니다 UI를 구성하면, 무조건 aos와 ios에서 동일하게 보인다. (플러터 프레임워크가 OS 기본 컨트롤을 사용하지 않음) aos, io

madchick.tistory.com

 

 

 

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

리액트 네이티브로 모바일 앱 개발해보자, 꼬꼬꼬~~ 모바일앱 개발의 양대산맥, 리액트 네이티브와 플러터 리액트로 웹 개발을 해봤다면 리액트 네이티브로, 뉴비라면 플러터로 둘 다 해보고 싶

madchick.tistory.com

 

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

플러터를 이용하는 이유는 단순합니다. 안드로이드와 아이폰용 앱을 각각 따로 만들기 귀찮기 때문입니다. 아이콘도 안드로이드와 아이폰에 따라 준비해야 하는 파일들이 다릅니다. 매우 귀찮

madchick.tistory.com

 

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

플러터 관련 영상을 몇개 봤더니 유튜브가 계속 좋은 영상들을 추천해 주네요. 일단, 모아두기. 역시, 유튜브는 인류의 축복입니다. 구글 애드몹 광고 붙이기 Flutter로 앱에서 수익 창출 - 플러터

madchick.tistory.com

 

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

구글에서 플러터를 출시한지 4년이 넘어가고 있습니다. 2017년 5월에 0.0.6 버전을 출시한 이후로, 현재 2.8 버전이 출시된 상황입니다. 초기에는 긴가민가 했지만, 꾸준히 발전을 거듭해 이제 비지

madchick.tistory.com

728x90