[flutter] - Flutter에서의 지도 및 위치 기능 사용 방법

Flutter는 모바일 애플리케이션 개발을 위한 강력한 프레임워크로, 지도 및 위치 기능을 사용할 수 있습니다. 이를 통해 사용자의 위치를 추적하거나 지도 위에 마커를 표시할 수 있습니다. 이번 글에서는 Flutter에서 지도 기능을 사용하는 방법과 위치 정보를 얻어오는 방법을 알아보겠습니다.

Google Maps API 키 발급

먼저, Google Maps API 키를 발급받아야 합니다. Google 개발자 콘솔에 접속하여 프로젝트를 생성하고, Maps SDK for Android와 Maps SDK for iOS를 활성화합니다. 그리고 API 키를 발급받아야 합니다. 발급받은 키를 기억해두세요.

구글맵 패키지 설치

Flutter에서 지도 기능을 사용하기 위해 google_maps_flutter 패키지를 사용합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  google_maps_flutter: ^1.0.0

의존성을 추가한 후 flutter pub get 명령을 실행하여 패키지를 설치합니다.

지도 위에 마커 표시하기

지도 위에 마커를 표시하기 위해서는 GoogleMap 위젯을 사용해야 합니다. 아래의 코드는 예시입니다.

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

class MapScreen extends StatefulWidget {
  @override
  _MapScreenState createState() => _MapScreenState();
}

class _MapScreenState extends State<MapScreen> {
  GoogleMapController mapController;

  final LatLng _center = const LatLng(37.5665, 126.9780);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GoogleMap(
        onMapCreated: (GoogleMapController controller) {
          mapController = controller;
        },
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 14.0,
        ),
        markers: Set<Marker>.of([
          Marker(
            markerId: MarkerId('marker_1'),
            position: _center,
            infoWindow: InfoWindow(
              title: 'Seoul',
              snippet: 'Welcome to Seoul!',
            ),
          ),
        ]),
      ),
    );
  }
}

위 코드에서 GoogleMap 위젯을 사용하여 지도를 표시하고, Marker 위젯을 사용하여 마커를 표시합니다. markers 프로퍼티에는 Marker 위젯을 담은 Set을 전달합니다.

사용자의 위치 추적하기

사용자의 위치를 추적하기 위해서는 location 패키지를 사용합니다. pubspec.yaml 파일에 아래의 의존성을 추가해주세요.

dependencies:
  location: ^4.1.1

의존성을 추가한 후 flutter pub get 명령을 실행하여 패키지를 설치합니다. 그리고 사용자의 위치를 추적하기 위한 권한을 얻기 위해 AndroidManifest.xml (Android) 또는 Info.plist (iOS) 파일에 필요한 설정을 추가해야 합니다. 자세한 내용은 location 패키지의 문서를 참고하세요.

위치 정보를 가져오려면 Location 객체를 사용해야 합니다. 아래의 코드는 예시입니다.

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

class LocationScreen extends StatefulWidget {
  @override
  _LocationScreenState createState() => _LocationScreenState();
}

class _LocationScreenState extends State<LocationScreen> {
  Location location = Location();
  LocationData currentLocation;

  @override
  void initState() {
    super.initState();
    getLocation();
  }

  Future<void> getLocation() async {
    try {
      currentLocation = await location.getLocation();
    } catch (e) {
      print('Error getting location: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Latitude: ${currentLocation?.latitude}'),
            Text('Longitude: ${currentLocation?.longitude}'),
          ],
        ),
      ),
    );
  }
}

위 코드에서 Location 객체를 사용하여 현재 위치를 가져올 수 있습니다. getLocation 함수를 호출하여 현재 위치 정보를 얻어옵니다.

Flutter에서의 지도 및 위치 기능 사용 방법에 대해 알아보았습니다. 이를 활용하여 사용자의 위치를 추적하고 지도 위에 마커를 표시할 수 있습니다. 추가적인 세부 사항은 공식 문서 및 API 문서를 참고하시기 바랍니다.

참고 자료