2023. 7. 15. 14:58ㆍ모바일어플개발/Flutter
안녕하세요~ totally 개발자입니다.
WebView JavaScript Communication
Flutter로 개발을 하다보면 웹뷰를 통해서 구현하는 경우가 필요합니다. 웹뷰를 통해서 구현할 때 웹 쪽과 플러터 앱 사이에 통신이 필요한 경우가 있습니다. 통신한다는 이야기는 데이터를 주고 받는 것을 말하며 주로 url 뒤에 데이터를 붙여 parameter 값을 넘기거나 웹 쪽의 자바스크립트 함수를 호출하는 방법이 있습니다. 이 포스팅에서는 자바스크립트 함수를 호출하는 방법을 통해 통신해보도록 하겠습니다.
사용한 패키지는 webview_flutter이며 최신 버전을 사용하면 아래 방법으로 구현이 안 되기 때문에 조금 이전 버전을 사용해야 하며 저는 3.0.4 버전을 사용하였습니다. 참고로 웹뷰로 사용할 웹사이트는 호스팅이 되어 있는 상태여야 가능하므로 준비해주셔야 합니다. 저는 000webhost를 사용하였습니다.
Step 1: pubspec.yaml에 webview_flutter 패키지 3.0.4 버전을 추가하고 Command(Ctrl) + S 또는 터미널에 flutter pub get 해줍니다.
Step 2: 웹뷰로 사용할 파일 web_view_test.html을 생성하시고 다음처럼 자바스크립트 함수를 작성하여 줍니다. 71-73번째 라인은 앱에서 웹으로 데이터를 전달할 함수이며 75-77번째 라인은 웹에서 앱으로 데이터를 전달할 함수입니다. 아래에서 보시겠지만, 웹에서 앱으로 데이터를 전달할 때에는 플러터의 javascriptChannels를 통해 데이터를 전달할 수 있습니다. 그 때 필요한 name을 지정한 것이 toApp이며 (이름 변경 가능) postMessage를 통해 데이터를 전달할 수 있습니다.
그리고 아래에서 메시지를 출력해줄 div 태그와 버튼을 만들어 onclick 속성을 통해 함수를 호출할 수 있도록 해줍니다.
Step 3: webViewPage.dart 파일을 만드신 후에 2번째 라인에 webview_flutter를 임포트해주시고 12번째 라인처럼 WebViewController 변수를 선언해줍니다.
Step 4: WebView 위젯을 만들어주시고 아래처럼 구성해주시면 됩니다. 설명을 스크린샷에 달아놓았습니다. 웹뷰에서 버튼을 눌러 함수를 호출하고 난 다음 메인 페이지로 돌아올 수 있도록 구성합니다.
Step 5: 웹뷰를 호출할 수 있는 메인 페이지를 만들어줍니다.
Step 6: 실행하여 테스트해본 모습입니다.
위처럼 console에도 메시지가 잘 나오면 성공입니다.
[전체 소스 코드]
[web_view_test.html]
[webviewPage.dart]
[main.dart]