Flutter Web App에서 Native App 데이터 받기
데스크탑 앱이나 모바일 앱에서 Flutter Web App으로 데이터를 보내보자.
회사에서 Windows 앱에서 Flutter로 만든 웹앱에 데이터를 전송하는 기능을 개발했다. Windows to Web App, Web to Web App 환경에서 잘 동작하는 것을 확인 할 수 있었다.
하지만 글을 작성할 때는 맥북으로 테스트를 했기 때문에, iOS에서 웹뷰를 통해 Flutter Web App을 띄우고, 데이터를 보내는 것으로 작성한다.
결국 원리는 자바스크립트 함수를 콜하는 것이기 때문에, 어떤 플랫폼에서도 잘 동작할 것이다.
프로젝트 구성
Web App과 Native App 역할을 해줄 두 개의 App이 필요하기 때문에, Monorepo 방식으로 프로젝트를 관리한다.
모노레포에 대해서는 Flutter Monorepo 이 글을 참고하면 좋다.
Flutter Web App
web 디렉토리 내에 함수 정의를 위한 JS파일을 생성해준다.
함수는 원하는대로 만들면 되는데 나는 3개의 아규먼트를 받아 state로 저장할 수 있고, 받은 값을 확인할 수 있도록 alert을 띄워주는 함수를 만들었다.
index.html에 해당 파일을 위한 태그를 작성한다.
window.state에 저장해놨던 값을 flutter에서 핸들링 할 수 있는지 테스트를 하기 위한 코드를 flutter 프로젝트 lib 내에 추가한다.
state 객체를 읽어서, 각 아규먼트에 접근하는 코드를 작성한다.
Native App
이제 테스트를 위한 네이티브 앱을 만든다.
웹뷰관련 패키지를 설치한다. 패키지는 어떤 걸 사용해도 상관 없다. 웹뷰를 띄우고 js 함수를 콜 할 수만 있으면 된다.
WebViewController를 초기화해준다. 초기화할 때 주소는 Flutter Web App의 주소를 넣어준다. 호스팅했다면, 호스팅한 주소를 넣어주면 된다.
runJavaScript를 통해서 js 함수를 호출한다. 이 때 파라미터로 “hi”, “hello”, “bye”를 넘겨줬다.
실행
실행해보면 아래와 같이 웹앱을 잘 불러온 것을 확인할 수 있다.
네이티브 앱에서 floating action button을 클릭해서 함수를 호출하고 화면을 rebuild 해주자.
argument로 넘겨줬던 hi, hello, bye를 출력해주는 모습을 볼 수 있다.
예제 만드는 게 조금 귀찮아서… FAB에 아이콘도 안넣고, rebuild도 버튼을 눌러서 하게끔 했다. 하지만 핵심은 웹뷰로 띄운 Flutter Web App에 js 함수를 호출하는 형태로 값을 주고 받을 수 있다는 것이다.
프로젝트와 전체 코드는 아래 깃허브에서 볼 수 있다.
