inappwebview로 html 파일 열기

웹뷰 기능 테스트 할 때 간단히 로컬 html 파일만 불러와 화면을 띄우는 방법에 대해 기록한다.

먼저 프로젝트 안에 assets 폴더를 추가한 후, 필요한 웹 페이지 파일(html, css, js 등)을 넣어준다.

그리고 pubspec.yaml 파일 내 flutter: 부분에 위에서 추가한 파일 경로를 적어준다.

 

e.g.

flutter:
...
...
  assets:
    - assets/test.html
    - assets/script.js
    - assets/style.css

아마 기본적으로 주석 처리되어 있을 것이다. 주석을 해제하고 파일 이름에 맞게 경로를 수정해준다.

다 적었다면 flutter pub get 하여 변경 사항을 저장해준다.

 

이후 inappwebview 세팅해주는 부분으로 가서

InAppWebView(
  initialFile: "assets/test.html",
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
)

initialFile 값으로 html 파일의 경로(assets/~)를 넣어준다. 기존 initialUrlRequest 대신 initialFile을 사용하는 것이다.

빌드해보면 test.html 파일이 웹뷰 화면에 정상적으로 로드된 것을 확인할 수 있다.