flutter 네이버 지도 사용하기

1. 네이버 지도 띄우기 위한 첫번째 단계

    flutter pub add flutter_naver_map permission_handler 를 터미널 창에서 실행하여 dependencies 에 추가한다.

 

2. 프로젝트명 생성

import 'package:flutter/material.dart';
import 'package:flutter_naver_map/flutter_naver_map.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:nmap_test/presentation/view/naver_map_view.dart';
 
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
 
  await NaverMapSdk.instance.initialize(
      clientId: 'z4t12347e4',
      onAuthFailed: (error) {
        print('Auth failed: $error'); // 인증 실패시 메시지 출력
      });
 
  runApp(
    ProviderScope(
      child: const MyApp(),
    ),
  );
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'NaverMap View',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: NaverMapScreen(),
    );
  }
}
 

 

clientId 는 임의로 변경했기 때문에 그대로 넣으면 동작되지 않는다.

각자 ncloud.com 에 등록해서 사용해야 동작된다.

 

import 'package:flutter/material.dart';
import 'package:flutter_naver_map/flutter_naver_map.dart';
import 'package:nmap_test/core/component/default_layout.dart';
import 'package:nmap_test/core/res/palette.dart';
import 'package:permission_handler/permission_handler.dart';
 
class NaverMapScreen extends StatefulWidget {
  const NaverMapScreen({Key? key}) : super(key: key);
 
  @override
  State<NaverMapScreen> createState() => _NaverMapScreenState();
}
 
class _NaverMapScreenState extends State<NaverMapScreen> {
 
  @override
  void initState() {
    super.initState();
    _permission();
  }
 
  void _permission() async {
    var requestStatus = await Permission.location.request();
    var status = await Permission.location.status;
    if (requestStatus.isPermanentlyDenied || status.isPermanentlyDenied) {
      openAppSettings();
    }
  }
 
  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      title: 'Naver Map',
      appbarBgColor: Palette.primary,
      child: NaverMap(
          options: const NaverMapViewOptions(locationButtonEnable: true),
          onMapReady: (controller) {
            print('네이버맵 로딩됨');
          },
        ),
      );
  }
}
 

locationButtonEnable: true 로 설정하여 지도 왼쪽 하단에 현재 위치로 이동하는 버튼이다.

위험권한을 추가하여 현재 위치 파악을 할 수 있다.

 

 

3. ncloud.com 에 앱 등록

   https://link2me.tistory.com/1832 를 참조하여 앱을 등록한다.

 

4. Android 설정

- build.gradle

  compileSdkVersion 34

  minSdkVersion 23 으로 변경

android {
    namespace "com.link2me.flutter.nmap_test"
    compileSdkVersion 34
    ndkVersion flutter.ndkVersion
 
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
 
    kotlinOptions {
        jvmTarget = '1.8'
    }
 
    sourceSets {
        main.java.srcDirs += 'src/main/kotlin'
    }
 
    defaultConfig {
        applicationId "com.link2me.flutter.nmap_test"
        minSdkVersion 23
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
 
    buildTypes {
        release {
            signingConfig signingConfigs.debug
        }
    }
}

 

- AndroidManifest.xml 파일 추가 사항

  퍼미션 추가 및 meta-data 추가

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
 
    <application
        android:label="nmap_test"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher">
 
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
 
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="z4t12347e4" />
    </application>
</manifest>

 

 

5. ios 설정

  기본 테스트는 Windows 환경에서 하고, 나중에 맥북에서 ios 테스트를 하는 순서로 진행 한다.

  아이폰에서 단순 지도 띄우는 것은 추가 사항 없어도 동작됨을 확인했다.

  현재 위치 정보를 가져오기 위해서는 권한 설정이 필요하다.

 

Info.plist 하단 dict안에 추가할 사항

    <!-- Permission options for the `location` group -->
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>Need location when in use</string>
    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
    <string>Always and when in use!</string>
    <key>NSLocationUsageDescription</key>
    <string>Older devices need location.</string>
    <key>NSLocationAlwaysUsageDescription</key>
    <string>Can I have location always?</string>

 

 

Podfile 추가사항

파일 하단에서 아래 부분에 코드를 추가한다.

권한설정은 Info.plist 와 Podfile 을 모두 설정해야 정상 동작되고, 앱에 권한 설정하는 기능이 추가된다.

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
 
    target.build_configurations.each do |config|
      # You can remove unused permissions here
      # for more information: https://github.com/BaseflowIT/flutter-permission-handler/blob/master/permission_handler/ios/Classes/PermissionHandlerEnums.h
      # e.g. when you don't need camera permission, just add 'PERMISSION_CAMERA=0'
      config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
        '$(inherited)',
 
        ## dart: PermissionGroup.calendar
        #'PERMISSION_EVENTS=1',
 
        ## dart: PermissionGroup.calendarFullAccess
        #'PERMISSION_EVENTS_FULL_ACCESS=1',
 
        ## dart: PermissionGroup.reminders
        #'PERMISSION_REMINDERS=1',
 
        ## dart: PermissionGroup.contacts
        #'PERMISSION_CONTACTS=1',
 
        ## dart: PermissionGroup.camera
        #'PERMISSION_CAMERA=1',
 
        ## dart: PermissionGroup.microphone
        #'PERMISSION_MICROPHONE=1',
 
        ## dart: PermissionGroup.speech
        #'PERMISSION_SPEECH_RECOGNIZER=1',
 
        ## dart: PermissionGroup.photos
        #'PERMISSION_PHOTOS=1',
 
        ## dart: [PermissionGroup.location, PermissionGroup.locationAlways, PermissionGroup.locationWhenInUse]
        'PERMISSION_LOCATION=1',
 
        ## dart: PermissionGroup.notification
        #'PERMISSION_NOTIFICATIONS=1',
 
        ## dart: PermissionGroup.mediaLibrary
        #'PERMISSION_MEDIA_LIBRARY=1',
 
        ## dart: PermissionGroup.sensors
        #'PERMISSION_SENSORS=1',
 
        ## dart: PermissionGroup.bluetooth
        #'PERMISSION_BLUETOOTH=1',
 
        ## dart: PermissionGroup.appTrackingTransparency
        #'PERMISSION_APP_TRACKING_TRANSPARENCY=1',
 
        ## dart: PermissionGroup.criticalAlerts
        #'PERMISSION_CRITICAL_ALERTS=1',
 
        ## dart: PermissionGroup.criticalAlerts
        #'PERMISSION_ASSISTANT=1',
      ]
 
    end
  end
end
 
 

 

복사가 잘 안되면 https://github.com/Baseflow/flutter-permission-handler/blob/main/permission_handler_apple/example/ios/Podfile 파일을 참조하여 내용을 추가하고 필요없는 권한은 주석처리(#)한다.