[Flutter] Flutter에서 KakaoMap API 활용하기

<분류>
A. 수단
- OS/Platform/Tool : Linux, Kubernetes(k8s), Docker, AWS
- Package Manager : node.js, yarn, brew, 
- Compiler/Transpillar : React, Nvcc, gcc/g++, Babel, Flutter
- Module Bundler  : React, Webpack, Parcel

B. 언어
- C/C++, python, Javacsript, Typescript, Go-Lang, CUDA, Dart, HTML/CSS

C. 라이브러리 및 프레임워크 및 SDK
- OpenCV, OpenCL, FastAPI, PyTorch, Tensorflow, Nsight

 

---

1. What? (현상)

이전에 링크(https://tkayyoo.tistory.com/88)에서는 kakaomap을 webapp으로 구현하기 위한 Web API를 사용하는 것을 다루었습니다. 하지만 이번 시간엔 Native에서 Kakaomap을 구현하기 위해 kakao_map_plugin라는 플러그인을 활용하는 방법을 다뤄보려고 합니다.

https://pub.dev/packages/kakao_map_plugin

 

위 링크에서 다룬바와 같이 Web API를 통해 맵을 관리하면 customScript를 통해 Javascript를 직접작성해 Marker를 관리하므로, Flutter로 state를 관리하기에는 직관적이지가 않습니다. 따라서 Native로 State를 관리하기 위해 구현해보고자 합니다.

---

2. Why? (원인)

• X

---

3. How? (해결책)

• iOS 셋팅 : ios/Runner/Info.plist에 아래와 같이 NSAppTransportSecurity권한을 추가해주고, io.flutter.embedded_view_previews 키를 추가해줍니다. 

<dict>
    <key>NSAppTransportSecurity</key>
      <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSAllowsArbitraryLoadsInWebContent</key>
        <true/>
      </dict>
    <key>io.flutter.embedded_views_preview</key>
    <true/>
</dict>

• 안드로이드 셋팅 : android/app/src/main/AndroidManifest.xml에 인터넷 권한 및 usesCleartextTraffic을 설정해줍니다.

<manifest>
    <!-- webview_flutter 에서 인터넷 접속을 위한 권한을 선언합니다 -->
    <uses-permission android:name="android.permission.INTERNET" />

    <application
    android:usesCleartextTraffic="true">
        ...
    </application>
</manifest>

• 코드 : 셋팅 초기화를 위해 app key를 등록합니다.
  ** API에 나와 있는 app key등록하는 방법은 flutter_dotenv라는 플러그인을 활용해서 등록했는데. flutter_dotenv 활용하는 방법은 아래 더보기를 통해 진행하세요

-----------------------------------------------------------------------------------------------------

<flutter_dotenv를 활용해 환경변수 등록하는방법>

1. 아래 내용을 pubspec.yaml에 추가합니다
   dependencies:
     flutter_dotenv: ^5.0.2
   assets:
        - assets/config/.env
2. 해당 환경 변수를 가져옵니다.
   import 'package:flutter_dotenv/flutter_dotenv.dart';
   await dotenv.load(fileName: 'assets/config/.env');
3. assets/config/.env에 환경변수를 입력해줍니다.
   BASE_URL=https://--
4. 환경변수를 불러옵니다.
   String baseUrl = dotenv.env['BASE_URL'];

-----------------------------------------------------------------------------------------------------

import 'package:kakao_map_plugin/kakao_map_plugin.dart';
 
const String kakaoMapKey = '[JavaScript 키]';

AuthRepository.initialize(appKey: kakaoMapKey);

• 사용하기 : 맵을 생성하고 Marker 추가하는 코드입니다. 주의할 점은 외부에 반드시 Size를 명시해주어야합니다.

 Set<Marker> markers = {}; // 마커 변수
KakaoMapController mapController;

...
  Container(
    width : MediaQuery.of(context).size.width,
    height : MediaQuery.of(context).size.height,
    child: KakaoMap(
      onMapCreated: ((controller) async {
        mapController = controller;

        markers.add(
        	Marker(
              markerId: UniqueKey().toString(),
              latLng: await mapController.getCenter(),
        	)
        );
        setState(() { });
      }),
      markers: markers.toList(),
      center: LatLng(37.3608681, 126.9306506),
    ),
  );
...

 

---

https://pub.dev/packages/flutter_dotenv