[Flutter] Kakao Map 사용하기

지금 하고있는 Flutter 프로젝트에서 카카오 맵 api를 적용시키려 많은 삽질을 했다.

( 대부분이 키 해시 관련 문제였지만 ) 

 

여러분들은 이 글을 보고 조금이라도 편하게 하시길

 

 

네이버 맵은 사용 방법이 훨씬 쉽습니다. 혹시 네이버 맵을 사용하실 분들은 아래를 참고해주세요

[Flutter] Naver Map 사용하기

 

---

이 글은 Window, Android 기준으로 작성되었습니다.

 

 

1. 프로젝트 생성

import 'package:flutter/material.dart';
import 'package:flutter_kakao_map/flutter_kakao_map.dart';
import 'package:flutter_kakao_map/kakao_maps_flutter_platform_interface.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return MaterialApp(
   title: 'KaKao Map',
   home: KakaoMapTest(),
  );
 }
}

class KakaoMapTest extends StatefulWidget {
 @override
 _KakaoMapTestState createState() => _KakaoMapTestState();
}

class _KakaoMapTestState extends State<KakaoMapTest> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
   appBar: AppBar(title: const Text('Flutter KakaoMap example')),
   body: Column(
​    children: [],
   ),
  );
 }
}

 

---

 

2. 애플리케이션 환경설정

2-1 애플리케이션 추가

 

https://developers.kakao.com/console/app에 접속 후 로그인 하기

카카오계정 로그인

 

 

로그인을 완료했다면 애플리케이션을 추가합니다.

 

 

각각 자신의 프로젝트에 맞게 자유롭게 작성합니다.

이후 저장 버튼을 누르면 아래 사진과 같은 창이 나타납니다.

 

 

2-2 플랫폼 등록

 

네이티브 앱 키는 추후 사용되므로 알아두기 !

애플리케이션 등록을 위해 플랫폼을 설정해봅시다.

 

플랫폼 설정하기를 클릭하면 아래와 같은 창이 뜹니다.

 

Android 플랫폼 등록을 클릭합니다.

 

 

패키지명과 키 해시 입력은 아래에서 자세히 설명드리겠습니다.

 

2-2-1 패키지명 등록

 

android/app/src/main/AndroidManifest.xml

 

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.kakaomap">
.
.
.
</manifest>

package="패키지명"으로 알고 계시면 편해요

 

 

2-2-2 키 해시 등록

 

자세한 것은 https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android-v1에서 참조해주세요

Kakao Developers

 

꼭, Power Shell이 아닌 cmd에서 아래와 같은 코드를 입력해주세요 ! 

그럼 디버그 해시 키를 알 수 있습니다. (만약, 앱을 배포하실거라면 위 링크에서 릴리즈 해시 키를 알 수 있어요)

keytool -exportcert -alias androiddebugkey -keystore C:\Users\{user}\.android\debug.keystore -storepass android -keypass android | openssl sha1 -binary | openssl base64

 

2-3 SDK 등록

 

https://apis.map.kakao.com/android/guide/에서 Kakao Map SDK를 다운로드 받고 압축을 풀어주세요

 

 

압축을 풀고, Android_DaumMap_SDK_1.4.1.0/Android_DaumMap_SDK_1.4.1.0/libs에서 파일을 확인해주세요

1.4.1.0 버젼 기준으로 파일은 아래와 같습니다.

 

 

 

파일들을 Flutter 프로젝트 안에 이동시켜주세요

 

libDaumMapAndroid.jar는 /app/ 폴더에 libs 폴더를 만들어주고 /app/libs/에 복사해주세요

나머지 세개 폴더는 /app/source/main/에 jniLibs 폴더를 만들어주고 /app/source/main/jniLibs에 복사해주세요

 

 

 

 

그리고 app 수준의 AndroidManifest.xml에 Permission과 App key를 추가해줍니다.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

<meta-data android:name="com.kakao.sdk.AppKey" android:value="XXXXXXXXXXXXXXXXXXXXXXXXXXXX"/>

 

이 때 value는 네이티브 앱 키를 입력하면 됩니다.

 

/app/main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.kakaomap">

     <uses-permission android:name="android.permission.INTERNET" />
     <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
 
     <meta-data android:name="com.kakao.sdk.AppKey" android:value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"/>
     .
     .
     .

 </manifest>

 

---

3. 코드 작성

 

pubspec.yaml

flutter_kakao_map: ^0.0.4

https://pub.dev/packages/flutter_kakao_map

flutter_kakao_map | Flutter Package

 

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_kakao_map/flutter_kakao_map.dart';
import 'package:flutter_kakao_map/kakao_maps_flutter_platform_interface.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyAppOne(),
    );
  }
}

class MyAppOne extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyAppOne> {
  KakaoMapController mapController;
  MapPoint _visibleRegion = MapPoint(37.5087553, 127.0632877);
  CameraPosition _kInitialPosition =
      CameraPosition(target: MapPoint(37.5087553, 127.0632877), zoom: 5);

  void onMapCreated(KakaoMapController controller) async {
    final MapPoint visibleRegion = await controller.getMapCenterPoint();
    setState(() {
      mapController = controller;
      _visibleRegion = visibleRegion;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter KakaoMap example')),
      body: Column(
        children: [
          Center(
              child: SizedBox(
                  width: 300.0,
                  height: 200.0,
                  child: KakaoMap(
                      onMapCreated: onMapCreated,
                      initialCameraPosition: _kInitialPosition)))
        ],
      ),
    );
  }
}

 

아쉽게도 카카오 맵은 AVD에서 확인할 수 없습니다.

테스트용 기기나 자신의 스마트폰에 연결해서 확인해봅시다.

 

 

위 예제 코드는 https://pub.dev/packages/flutter_kakao_map에서 참조했습니다.

간혹가다 에러가 나시는 분들은 아래 코드를 /app/main/AndroidManifest.xml에 추가해보세요

 

android:usesCleartextTraffic="true"

<application
​    android:name="io.flutter.app.FlutterApplication"
​    android:label="kakaomap"
​    android:icon="@mipmap/ic_launcher"
​    android:usesCleartextTraffic="true">
</application>