[Flutter] 티맵 카카오내비 호출하기

플러터 앱에서 티맵과 카카오내비를 열어보겠습니다. 

이미 공유하신 분들 덕분에 쉽게 할 수 있었지만, 조금 더 다듬어 작성해 보았습니다. 제가 기여한 건 하나도 없습니다. 

 

티맵 

Android 설정

android > app > src > main > AndroidManifest.xml 에 아래 두 package 추가 

<package android:name="com.skt.skaf.l001mtm091" /> 
<package android:name="com.skt.tmap.ku" />

예) 

        ...
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
    <queries>
        <package android:name="com.skt.skaf.l001mtm091" /> 
        <package android:name="com.skt.tmap.ku" />
    </queries>
</manifest>

 

iOS 설정 

ios > Runner > info.plist 에 LSApplicationQueriesSchemes tmap 추가

<string>tmap</string>

예) 

<key>LSApplicationQueriesSchemes</key>
<array>
	<string>tmap</string>
</array>

 

Flutter 코드 작성

// 주의) 티맵 url scheme 은 운영체제 마다 다르기 때문에 각각 설정해 주어야 합니다 .
String tmapURL = Platform.isIOS
     ? 'tmap://route?rGoName=${장소이름}&rGoX=${경도}&rGoY=${위도}'
     : 'tmap://route?referrer=com.skt.Tmap&goalx=${경도}&goaly=${위도}&goalname=${장소이름}';

if (await canLaunchUrl(Uri.parse(tmapURL))) {
     await launchUrl(Uri.parse(tmapURL));
} else {
     // 티맵이 없다면 설치 페이지로 이동 
     var store = Platform.isIOS
            ? 'https://apps.apple.com/app/id431589174'
            : 'https://play.google.com/store/apps/details?id=com.skt.tmap.ku&hl=ko-KR';
     launchBrowserTab(Uri.parse(store));
}

 

카카오 내비 

카카오 내비는 플러터 공식 SDK를 통해서 세팅해야 합니다. 

SDK 설치 

flutter pub add kakao_flutter_sdk

 

플랫폼 키 등록 

android 및 ios 플랫폼 키가 없다면 등록합니다. 나중에 써먹습니다. 

 

Custom Scheme 설정 

카카오네비 구현에 필요없습니다. 카카오 로그인 기능도 같이 사용하고자 한다면 적용하세요. 

 

SDK 초기화 

프로젝트 main.dart 에서 아래와 같이 SDK를 초기화 합니다. 위에서 확인한 네이티브 앱키를 복사하여 적용하세요. 

  // runApp() 호출 전 Flutter SDK 초기화
  KakaoSdk.init(nativeAppKey: 카카오네이티브앱키);

 

iOS : 앱 실행 허용 목록 설정 

프로젝트 > ios > Runner > info.plist 에서 아래 항목을 추가합니다. 

		<key>LSApplicationQueriesSchemes</key>
		<array>
			<string>kakaonavi-sdk</string>
		</array>

 

코드 작성 

아래와 같이 코드를 작성합니다. 

NOTE: 테스트 시 '연결오류입니다. 서비스 제공측에 문의하시기 바랍니다' 에러가 발생하면 ios bundle identifier가 올바르게 설정되어 있는 지 확인하세요. 

if (await NaviApi.instance.isKakaoNaviInstalled()) {
                      // 카카오내비 앱으로 길 안내, WGS84 좌표계 사용
                      await NaviApi.instance.navigate(
                        destination: Location(
                          name: 장소이름,
                          x: '경도, 예: 127.108640', 
                          y: '위도, 예: 37.402111',
                        ),
                        option: NaviOption(coordType: CoordType.wgs84),
                      );
                    } else {
                      // 카카오 네비가 없다면 설치 페이지로 이동
                      launchBrowserTab(Uri.parse(NaviApi.webNaviInstall));
                    }

 

참고 자료 

• https://velog.io/@leona/Flutter-%EC%9A%B0%EB%8B%B9%ED%83%95%ED%83%95-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%805-%ED%8B%B0%EB%A7%B5-%EC%8B%A4%ED%96%89%ED%95%98%EA%B8%B0
• https://developers.kakao.com/docs/latest/ko/flutter/getting-started