네이버 지도 Fluuter

이동언·2025년 2월 12일

1. 네이버 개발자 설정

원하는 서비스를 선택해서 설정해주면됨.

클라이언트 아이디는 복사해놓으면되고, android 앱 패키지 이름이나 ios bundle id는 프로젝트를 새로 만들때 사용되는데, 필자는 프로젝트를 만들때, document 내부 map3라는 폴더를 location으로하고, org를 com.gooinpro, 프로젝트명을 navermap으로 설정함.

이건 namespace인데 따로 설정한건없는데 참고차 올려놓음.

ios 같은경우 번들id 때문에 안될수도있음.

ios/Runner/lnfo.plist 내부에

해당 참조내용이 있을텐데 이건

ios/Runner.xcodeproj/project.pbxproj 에 PRODUCT_BUNDLE_IDENTIFIER 값이므로 확인해보고
참조하지말고 바로 네이버에 설정한 값을 넣어도 될듯.

2. pubspec.yaml

플러그인은 기존에 만드신분껄로 해봤는데 여러 에러가떠서 같은팀원분이 해결해주신것을 fork떠서 사용중.

3. android

android/app/main/res/androidManifest.xml

이렇게 넣어주자

4. ios

ios/Runner/lnfo.plist

    <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
    <string>[USAGE PERPOSE]</string>
    <key>NSLocationAlwaysUsageDescription</key>
    <string>[USAGE PERPOSE]</string>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string>[USAGE PERPOSE]</string>
    <key>NMFClientId</key>
    <string>네이버 클라이언트 아이디</string>
    <key>io.flutter.embedded_views_preview</key>
    <true/>
    <key>NSAllowsArbitraryLoads</key>
    <true/>

여기 내부에도 넣어주자

5. 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 StatefulWidget {

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final scaffoldKey = GlobalKey<ScaffoldState>();
  Completer<NaverMapController> _controller = Completer();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: NaverMap(
          onMapCreated: _onMapCreated,
        ),
      ),
    );
  }

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

}