[Flutter] 플러터 kakaomap_webview 패키지 활용

이번에는 pub.dev에 있는 kakaomap_webview 패키지를 활용해보자.

라이브러리

우선 Kakao 오픈 api 키를 사용하기 위해 다음 링크에 들어가 카카오 계정으로 로그인한다.

Kakao Developers

로그인을 했다면 애플리케이션 추가하기를 눌러 카카오 맵 api를 사용할 애플리케이션을 등록한다.

앱 이름과 사업자명은 자신이 원하는 이름으로 설정하여 저장한다.

성공적으로 애플리케이션을 추가했다면

내 애플리케이션 > 앱 설정 > 요약 정보에 들어가 JavaScript 키를 메모장에 작성해 놓는다.

이제 새 프로젝트를 생성 후 코드적인 부분을 작성해보자.

pubspec.yaml 파일에 들어가 다음 코드를 적어 kakaomap_webview 패키지를 추가해주자.

패키지 코드는 다음 링크에서 확인할 수 있다.

kakaomap_webview | Flutter Package

dependencies:
  kakaomap_webview: ^0.3.0

패키지를 추가하면서 다음과 같은 에러가 생길 수 있다. => A package may not list itself as a dependency.

위 에러는 모듈명과 프로젝트 명이 같을 때 발생한다.

프로젝트 명은 위 패키지 모듈명과 다른 이름으로 생성해야 한다.

패키지를 추가했다면 다음 폴더 경로를 통해 들어가 코드를 작성해준다.

android > app > src > main > AndroidMainfest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.kakao_map">
	
    // 인터넷 요청을 위해
    <uses-permission android:name="android.permission.INTERNET" /> 

	<application
  		android:label="your app name"
  		android:icon="@mipmap/ic_launcher"
  		android:usesCleartextTraffic="true"> // http 프로토콜 예외 발생 조치를 위해

ios의 경우 참고 자료에 들어가 ios 폴더 부분의 코드를 작성하면 될 것 같다.

다음으로 minSdkVersion을 21이상으로 맞춰나야한다.

adnrdoid > app > build.gradle 경로로 들어가 minSdkVersion 21로 작성한다.

minSdkVersion 

main.dart

import 'package:flutter/material.dart';
import 'kakao_map_test.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
    
        primarySwatch: Colors.blue,
      ),
      home: KakaoMapTest(),
    );
  }
}

kakao_map_test.dart

import 'package:flutter/material.dart';
import 'package:kakaomap_webview/kakaomap_webview.dart';

const String kakaoMapKey = 'yourKey';

class KakaoMapTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(title: Text('Kakao map webview test')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          // KakaoMapView
          KakaoMapView(
              width: size.width,
              height: 600,
              kakaoMapKey: kakaoMapKey,
              lat: 33.450701,
              lng: 126.570667,
              showMapTypeControl: true,
              showZoomControl: true,
              markerImageURL:
                  'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png',
              onTapMarker: (message) async {
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('Marker is clicked')));

                //await _openKakaoMapScreen(context);
              }),
          ElevatedButton(
              child: Text('Kakao map screen'),
              onPressed: () async {
                await _openKakaoMapScreen(context);
              })
        ],
      ),
    );
  }

  // kakao map 지도 검색으로 이동
  Future<void> _openKakaoMapScreen(BuildContext context) async {
    KakaoMapUtil util = KakaoMapUtil();

    String url =
        await util.getMapScreenURL(33.450701, 126.570667, name: 'Kakao 본사');

    Navigator.push(
        context, MaterialPageRoute(builder: (_) => KakaoMapScreen(url: url)));
  }
}

위 코드에서 kakaoMapKey에는 이전에 메모장에 적어 놓았던 JavaScript 키를 작성하면 된다.

위 코드를 모두 작성했다면 다음 영상과 같이 실행되는 것을 확인할 수 있다.

AVD에서는 실행되는 것을 확인할 수 없고 테스트용 기기나 갤럭시 스마트 폰에 연결해서 확인하면 될 것 같다.

 

참고

kakaomap_webview | Flutter Package

github

GitHub - junjange/Flutter-Learning: 플러터 학습