[Flutter] Kakao Map api 사용하기

 

 

 

 

 

 

카카오 developer 사이트 바로가기

카카오계정

 

 

 

[ + 애플리케이션 추가하기] 클릭

 

 

앱 이름, 사업자명 입력 후 저장

 

 

그럼 다음과 같이 리스트에 애플리케이션이 추가된 것을 확인 가능.

생성된 애플리케이션 클릭

 

 

 

여기서 네이티브앱 키 메모해두고,

[플랫폼 설정하기] 클릭

 

 

 

320x100

 

 

 

[Android 플랫폼 등록] 클릭

 

 

 

패키지명과 키 해시 입력 후 저장

 

 

아래와 같이 Android 플랫폼이 등록된 것을 확인 가능

 

 

 

해시 키 값은 아래를 참고하면 된다.

---

https://developers.kakao.com/docs/latest/ko/getting-started/sdk-android-v1

Kakao Developers

 

 

위 링크에서는 릴리즈 해시 키

 

 

 

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

다음 명령어로 디버그 해시 키

 

---

https://apis.map.kakao.com/android/guide/

 

 

 

 

 

 

 

위 사이트에서 Kakao SDK 다운받고 압축 해제 후

다음 경로에 있는 라이브러리들과 jar 파일을 복사

 

 

 

jar 파일은 프로젝트\android\app\libs 에 붙여넣기

arm 폴더들은 프로젝트\android\app\src\main\jniLibs 에 붙여넣기

 

 

AndroidManifest.xml에 다음과 같은 코드 추가

<manifest ...>
<uses-permission android:name="android.permission.INTERNET" /> <!-- 인터넷 권한 추가 -->
<application>

    ...

    <meta-data
        android:name="com.kakao.sdk.AppKey"
        android:value="${NATIVE_APP_KEY}" /> <!-- 네이티브 앱 키 설정 -->
</application>

 

 

---

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_kakao_map: ^0.0.4

 

 

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)))
        ],
      ),
    );
  }
}

 

 

 

 

---

같이 보면 좋은 글 ▼

https://cording-cossk3.tistory.com/203

[Flutter] 네이버 Maps API 사용하기

 

 

https://cording-cossk3.tistory.com/198

[Flutter] Google Map API 사용하기

 

https://cording-cossk3.tistory.com/208

[Flutter] Kakao Map api 사용하기

 

https://cording-cossk3.tistory.com/210

[Flutter] Tmap API 및 Tmap 앱 연동 (1) - Android편

 

https://cording-cossk3.tistory.com/212

[Flutter] Tmap API 및 Tmap 앱 연동 (2) - iOS편