[flutter] 플러터 geolocator와 카카오맵 API를 이용한 위치 기반 서비스 개발

04 Dec 2023

flutter

지금은 모바일 앱 개발에 위치 기반 서비스가 널리 활용되고 있습니다. 사용자의 위치를 파악하여 필요한 정보를 제공하거나, 특정 위치 주변의 가게나 장소를 검색해주는 등 다양한 기능을 구현할 수 있습니다. 이번에는 플러터(Flutter)의 geolocator 패키지와 카카오맵 API를 활용하여 위치 기반 서비스를 개발하는 방법에 대해 알아보겠습니다.

1. geolocator 패키지 설치

먼저, Flutter 프로젝트에 geolocator 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  geolocator: ^7.0.3

의존성을 추가한 후, 터미널에서 다음 명령을 실행하여 패키지를 설치합니다:

flutter pub get

2. geolocator를 이용한 위치 정보 가져오기

geolocator 패키지를 사용하면 간단하게 사용자의 위치 정보를 가져올 수 있습니다. 우선 main.dart 파일에 다음 코드를 추가합니다:

import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Geolocator Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _location = '위치 정보 없음';

  Future<void> _getLocation() async {
    Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );
    
    setState(() {
      _location = '위도: ${position.latitude}, 경도: ${position.longitude}';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geolocator Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(_location),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _getLocation,
              child: Text('위치 가져오기'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드는 간단한 앱을 생성하고, 버튼을 클릭할 때 사용자의 위치 정보를 가져와 화면에 표시하는 예제입니다. 앱을 실행하고 버튼을 클릭하면 현재 위치의 위도와 경도가 화면에 출력됩니다.

3. 카카오맵 API 키 발급

이제 카카오맵 API를 사용하기 위해 API 키를 발급받아야 합니다. 카카오 개발자 웹사이트에 가입한 후 프로젝트를 생성하고, 앱 키를 발급받아야 합니다. 발급받은 앱 키를 메모해둡니다.

4. 카카오맵 API를 플러터 앱에 적용하기

카카오맵 API를 플러터 앱에 적용하기 위해 kakao_maps_flutter 패키지를 사용합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  kakao_maps_flutter: ^1.2.0

의존성을 추가한 후, 터미널에서 패키지를 설치합니다:

flutter pub get

그리고 main.dart 파일에 다음 코드를 추가합니다:

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:geolocator/geolocator.dart';
import 'package:kakao_maps_flutter/kakao_maps_flutter.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Geolocator & Kakao Map Example',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Position _position;
  Completer<KakaoMapController> _controller = Completer();

  Future<void> _getLocation() async {
    Position position = await Geolocator.getCurrentPosition(
      desiredAccuracy: LocationAccuracy.high,
    );

    setState(() {
      _position = position;
    });

    final controller = await _controller.future;
    CameraPosition cameraPosition = CameraPosition(
      target: LatLng(position.latitude, position.longitude),
      zoom: 14,
    );
    controller.animateCamera(CameraUpdate.newCameraPosition(cameraPosition));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Geolocator & Kakao Map Example'),
      ),
      body: Stack(
        children: [
          KakaoMap(
            onMapCreated: (KakaoMapController controller) {
              _controller.complete(controller);
            },
            initialCameraPosition: CameraPosition(
              target: LatLng(37.5665, 126.9780),
              zoom: 7,
            ),
          ),
          Positioned(
            left: 16,
            bottom: 16,
            child: ElevatedButton(
              onPressed: _getLocation,
              child: Text('위치 가져오기'),
            ),
          ),
        ],
      ),
    );
  }
}

위 코드는 위치 정보를 가져와서 카카오맵에 해당 위치를 보여주는 예제입니다. 카카오맵은 초기 위치를 서울로 설정하고, 위치 가져오기 버튼을 클릭하면 현재 위치로 카메라가 이동하여 해당 위치를 보여줍니다.

이제 앱을 실행해보면 카카오맵이 표시되고 위치 가져오기 버튼을 누르면 현재 위치로 카메라가 이동하는 것을 확인할 수 있습니다.

결론

위에서는 플러터의 geolocator 패키지와 카카오맵 API를 사용하여 위치 기반 서비스를 개발하는 방법에 대해 알아보았습니다. 이를 기반으로 실제 앱에서 다양한 위치 관련 기능을 구현할 수 있으며, 사용자에게 더 편리하고 유용한 서비스를 제공할 수 있습니다.

참고 문서:

geolocator 패키지: https://pub.dev/packages/geolocator
kakao_maps_flutter 패키지: https://pub.dev/packages/kakao_maps_flutter
카카오 개발자 웹사이트: https://developers.kakao.com/