[Flutter] 네이버 맵 연결

네이버 맵 공식 사이트

• 네이버 맵 클라우드 공식 서비스

NAVER CLOUD PLATFORM

• 네이버 맵 공식 문서 (android)

시작하기 · 네이버 지도 안드로이드 SDK

 

 

제공 서비스

 

네이버 맵 Flutter 플러그인

• naver_map_plugin (LBSTECH (origin))
• flutter_naver_map (LBSTECH clone & update)

 

네이버 맵 클라우드 등록

1. '네이버 API 어플리케이션' 사이트 접속

url: https://console.ncloud.com/naver-service/application

 

2. Application 추가 및 설정

1) Application 이름 설정

2)  네이버 맵 API 사용할 서비스 선택

3) 서비스 환경 등록

Android 앱 패키지 이름 설정

Flutter 프로젝트의 'android > app > src > main > AndroidManifest.xml'의 package 값으로 설정

* 서비스에 따라 밑에 표시되는 붉은 글씨에 적힌 필수 및 선택 값이 달라짐

 

4) Application 추가 확인

'인증 정보' 버튼을 클릭하면 Application Key를 확인할 수 있다.

 

Flutter 네이버 맵 플러그인 연결

naver_map_plugin

1) AndroidManifest 파일 설정

‘android > app > src> main > AndroidManifest.xml’ 파일을 통해 설저한다

• 'application' 태그 안에 Naver Client Id 추가 (위에서 확인한 네이버 Application Key의 ‘Client ID’ 값 복붙)
• 'manifest' 태그 안에 ACCESS_FINE_LOCATION permission 추가

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.tripmap">
   <application
		...
		
		<meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="{Client ID}" />
  </application>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
</manifest>

2) pubspec에 플러그인 추가

naver_map_plugin 최신 버전 입력

dependencies:
	... 
  naver_map_plugin: ^0.9.6

3) 테스트 스크립트 작성

참고: https://ahang.tistory.com/21

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

 

4) Flutter 실행

실행 시 ‘--no-sound-null-safety’ 붙여준다.

flutter run --no-sound-null-safety

 

 

[ 참고 ]

VSCode 에서 '--no-sound-null-safety' 등록하기

1. ‘Perfermance > Setting’에 들어가서 검색창에 ‘flutter run additional’ 입력

2. ‘--no-sound-null-safety’ 추가