[Flutter] Naver Map 사용하기

 

최근 지도 관련 어플을 Flutter의 Naver Map으로 개발했습니다.

 

확실히 UI도 한국인들에게 친숙하면서 깔끔하고, 지도에 위치한 장소나 식당 등의 최신화가 잘 되어있더라구요.

(구글 맵 같은 경우 폐업했지만 운영 중이라고 표기된 매장이 여럿있어서 골치아팠습니다)

 

사용법도 어렵지않으니 아래 내용을 천천히 따라오시면 충분히 개발하실 수 있습니다.

 

 

---

 

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

 

 

1. 프로젝트 생성

import 'package:flutter/material.dart';

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

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

class NaverMapTest extends StatefulWidget {
  @override
  _NaverMapTestState createState() => _NaverMapTestState();
}

class _NaverMapTestState extends State<NaverMapTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('NaverMap Test')),
      body: Container(),
    );
  }
}

 

---

 

 

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

 

 

2-1 애플리케이션 추가

https://www.ncloud.com/product/applicationService/maps에 접속 후 로그인 해주세요

NAVER CLOUD PLATFORM

 

 

이용 신청하기 버튼을 누르시면 아래와 같은 페이지가 나옵니다.

 

Application 등록 버튼을 클릭해주세요.

 

 

 

Application의 이름을 설정하고 사용할 서비스를 선택해주세요.

저는 이후 추가 개발도 할 수 있으므로 Web Dynamic Map을 제외한 모든 서비스를 선택했습니다.

각각의 서비스가 궁금하시다면 아래 표를 참고해주세요.

 

 

 

 

 

Android 앱 패키지 이름을 추가해주세요.

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

 

 

2-1-1 패키지명 등록

android/app/src/main/AndroidManifest.xml

 

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

package="패키지명" 입니다.

 

 

2-2 플랫폼 등록

 

 

프로젝트의 인증 정보 화면에서 Client ID를 복사해두세요!

(제 Client ID가 노출되어도 상관 없습니다. 글 업로드 이후 해당 프로젝트를 삭제했습니다.)

 

 

2-2-1 Client ID 등록

android/app/src/main/AndroidManifest.xml

 

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.naver_map_test">
	<application
    .
    .
    .
    >
  	 <meta-data
                android:name="com.naver.maps.map.CLIENT_ID"
                android:value="2l5ywk38hk" />
     .
     .
     .
	</application>
 </manifest>

app 폴더 안 AndroidManifest.xml의 application 태그안에 Client ID를 추가해주세요.

 

 

---

 

 

3. 코드 작성

 

pubspec.yaml

naver_map_plugin: ^0.9.6

 

https://pub.dev/packages/naver_map_plugin

 

naver_map_plugin | Flutter Package

 

 

main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:naver_map_plugin/naver_map_plugin.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Naver Map',
      home: NaverMapTest(),
    );
  }
}

class NaverMapTest extends StatefulWidget {
  @override
  _NaverMapTestState createState() => _NaverMapTestState();
}

class _NaverMapTestState extends State<NaverMapTest> {
  Completer<NaverMapController> _controller = Completer();
  MapType _mapType = MapType.Basic;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('NaverMap Test')),
      body: Container(
        child: NaverMap(
          onMapCreated: onMapCreated,
          mapType: _mapType,
        ),
      ),
    );
  }

  void onMapCreated(NaverMapController controller) {
    if (_controller.isCompleted) _controller = Completer();
    _controller.complete(controller);
  }
}

 

코드를 실행시켜보면 아래와 같이 Naver Map이 잘 실행됩니다.