webview_flutter 2

[Flutter] webview_flutter JS 자바스크립트 통신 구현

안녕하세요. 웹뷰 앱을 만들면서 js 통신 작업을 진행했는 데 검색해도 별다른 팁이나 방법이 안내된게 많지 않다보니 정석은 아니지만 어떻게든 구현했던 방법을 공유하고자 합니다. 아래 사진과 같이 javascriptChannels를 작성해줍니다. 이때, _webToAppChange(context)는 아래에서 말씀해드리겠습니다. 저는 html 파일에서 아래와 같이 WebToApp이라는 자바스크립트 함수를 만들었습니다. 내용을 요약하자면 WebToApp이라는 함수를 호출할 때 json 데이터를 만들어 commandType 등의 전달한 명령어가 어떤 수행을 할 것인지에 대한 구분자를 작성해줍니다. 여기서 중요한 것은 webToAppChange.postMessage(jsonData); 입니다. webToAppCh..

Flutter 2022.08.04

[Flutter] webview_flutter Local File 웹뷰 로컬 파일 열기

저는 주로 C++언어를 다루기 때문에 Flutter에서 UI를 그려내기엔 숙련도가 매우 낮아 어려움이 있었습니다.. 그나마 웹은 Bootstrap을 자주 사용해봤고 반응형 웹을 만드는 것이 시간도 절약되고 당장에는 편할 것 같아 간단히 웹뷰 앱을 만들기로 했습니다. 근데 문제는 간단한 기능과 UI를 제공할 뿐인데 웹을 일일히 접속하기엔 트래픽을 감당할 자신이 없었습니다. 그래서 로컬에 html, js, css를 보관해서 불러오도록 구현했고 주요 기능, 통신 기능은 앱에서 작동하고 이를 js통신으로 웹뷰에서 불러온 로컬 파일과 통신하도록 구현했습니다. 회사 내에서 개발하던게 완료되어 자그마한 노하우를 공유하고자 합니다. 일단 저는 아래 패키지를 사용했으니 참고바랍니다. https://pub.dev/pack..

Flutter 2022.08.04