728x90
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안에 추가할 사항
|
1
2
3
4
5
6
7
8
9
10
|
<!-- 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 파일을 참조하여 내용을 추가하고 필요없는 권한은 주석처리(#)한다.
'Flutter 앱 > 활용예제' 카테고리의 다른 글
| Flutter QR Code Scan (플러터 QR코드 스캔) (0) | 2024.02.08 |
|---|---|
| flutter 현재 위치좌표 가져오기 (0) | 2024.02.01 |
| Flutter News App using riverpod (2) | 2024.01.25 |
| Flutter Retrofit GET, POST 예제 구현 (0) | 2023.12.22 |
| Flutter WebView 4.0 예제 (0) | 2023.05.29 |
Link2Me
