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

저는 주로 C++언어를 다루기 때문에 Flutter에서 UI를 그려내기엔

숙련도가 매우 낮아 어려움이 있었습니다..

그나마 웹은 Bootstrap을 자주 사용해봤고 반응형 웹을 만드는 것이

시간도 절약되고 당장에는 편할 것 같아 간단히 웹뷰 앱을 만들기로 했습니다.

 

근데 문제는 간단한 기능과 UI를 제공할 뿐인데 웹을 일일히 접속하기엔

트래픽을 감당할 자신이 없었습니다.

그래서 로컬에 html, js, css를 보관해서 불러오도록 구현했고

주요 기능, 통신 기능은 앱에서 작동하고 이를 js통신으로 웹뷰에서

불러온 로컬 파일과 통신하도록 구현했습니다.

 

회사 내에서 개발하던게 완료되어 자그마한 노하우를 공유하고자 합니다.

 

일단 저는 아래 패키지를 사용했으니 참고바랍니다.

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

 

위 패키지를 사용하실 경우 inappwebview와 달리 정보가 없어 힘든 점이 존재합니다ㅠㅠ..

하지만 js통신이 쉽고 전체적으로 가볍고 사용이 쉽습니다..ㅎㅎ

 

 

아래와 같은 함수를 웹뷰가 있는 State에 만들어주시면 되고

필요한 곳에서 await loadHtmlFromAssets('파일명', controller); 등으로

호출하시면 controller와 연결된 웹뷰에서

로컬 파일을 불러옵니다^^.

Future<void> loadHtmlFromAssets(String filename, WebViewController controller) async {
  String fileText = await rootBundle.loadString('assets/www/' + filename);
  controller.loadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
}

함수 호출하실 때 굳이 await을 붙이시지 않아도 잘 작동됩니다.

 

그리고 로컬 파일을 불러올 경우 외부 js, css파일을 html에서 불러오려 할 경우

경로 자체를 인식하지 못하는 경우가 있습니다.

저는 그냥 js, css 파일 내용을 그대로 복사 붙여넣기 하여

html안에 포함시켰으나 이럴 경우 html 파일 자체가 무거워지고

가독성도 떨어져서 불편하실 수 있습니다.

 

만약 js, css 파일 내용을 html과 분리하여 작동되도록 하고 싶으시다면

아래 질문에 표기된 내용과 같이 조치해주시면 해결하실 수 있습니다^^.

https://stackoverflow.com/questions/59007345/how-to-use-local-js-or-css-file-while-using-webview-flutter-plugin