플러터 플러그인 소개 flutter_inappwebview

이 글에서는 플러터에서 카카오맵 js api를 사용해 봅니다.

주위에 플러터 영업?을 하다보면, 웹 뷰 지원이 약해서, js api를 사용할 수 없어서 같은 이유로 플러터 사용을 꺼리는 사람들을 많이 봅니다.
과연 지금 플러터 웹 뷰는 괜찮을까요?

준비

• 카카오 맵 javascript api

  카카오 맵 api를 사용하기 위해서 위 링크에 있는 설명대로 키를 발급받습니다.

프로젝트 만들기

• flutter create --androidx -i swift

  flutter_inappwebview 는 androidx 가 필요하기 때문에 flutter create --androidx -i swift 명령을 이용해서 앱 프로젝트를 만들어야 합니다.
  AndroidX 를 지원하지 않는 기존 앱에 적용하려면 AndroidX Migration 과정을 거쳐야 합니다.
  

  또한 iOS 기본 언어로 swift를 지정해주어야 합니다. 최신 버전 플러터에서 설정을 건드리지 않으면 보통 기본값으로 swift로 됩니다.

• pubspec.yaml

  최신 버전으로 의존성 추가 해줍니다.

• 안드로이드 manifest.xml build.gradle 설정

  xml에서
  INTERNET 퍼미션 추가

  build.gradle 에서
  minSdkVersion 21 까지 올리기 (공식 문서에는 17 이상이면 관계 없다고 되어있지만 저는 21 이상을 추천합니다.)

기본 소스 코드

• 여기까지는 웹 뷰라면 당연히 되야하는 간단한 코드입니다.

카카오 지도 불러오기

• api 플랫폼 추가

  다시 카카오 개발자 콘솔 로 가서
  [내 어플리케이션] - [api를 사용할 어플리케이션] - [플랫폼] 으로 들어갑니다.
  Web 사이트 도메인에 https://localhost:[port] 를 추가해줍니다. 여기서는 9723 를 사용하는데 적당한 포트 를 사용해주면 됩니다.

• 로컬 서버 열기

  InAppLocalHostServer 클래스를 이용해서 로컬에서 호스팅하는 http 서버를 엽니다. port 는 위에서 지정한 port 에 맞게 넣어줍니다.

• html 추가

• pubspec 추가

  html 파일을 /assets/web/kakaomap.html 처럼 assets 폴더에 넣고
  해당 파일 경로를 pubspec.yaml 에 추가합니다.

• HTTP 관련 처리

  플러터에서는 iOS, Android 두 경우 모두 처리해주어야 합니다.

  iOS

  ATS 설정을 해주어야 합니다. iOS 에서 웹 뷰(UiKitView)를 사용하기 위해서
  'io.flutter.embedded_views_preview' 를 true 로 해줘야 합니다.

  Android

  http 프로토콜을 이용하면 ERR CLEARTEXT NOT PERMITTED 에러가 뜹니다. 해당 관련 처리를 해줘야 합니다.
  

  • https://developside.tistory.com/85
  • 공식 문서 (네트워크 보안 구성)

• 웹 뷰 코드 변경

  웹 뷰의 initialUrl 을 추가한 html 파일로 바꿔줍니다.

• 결과

  안드로이드

  

  iOS