[flutter] 플러터에서 위치 정보를 이용한 주변 치킨 배달 앱 만들기

12 Dec 2023

flutter

개발 환경 설정
위치 정보 획득
지도 표시
지도 위에 가게 마커 표시
선택한 가게 상세 정보 표시

1. 개발 환경 설정

플러터 개발을 위해서는 Flutter SDK가 설치되어 있어야 합니다. Flutter SDK가 설치되어 있지 않은 경우 공식 홈페이지에서 설치 가이드를 확인해주세요. 또한, 안드로이드 스튜디오 또는 비주얼 스튜디오 코드와 같은 통합 개발 환경을 사용하는 것이 좋습니다.

2. 위치 정보 획득

플러터에서 위치 정보를 획득하기 위해 위치 서비스를 사용할 수 있습니다. geolocator 패키지는 현재 위치를 가져오고 위치 권한을 요청하는 등의 기능을 제공합니다.

import 'package:geolocator/geolocator.dart';

// 현재 위치 가져오기
Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);

3. 지도 표시

획득한 위치 정보를 이용하여 지도를 표시하기 위해서는 google_maps_flutter 패키지를 사용할 수 있습니다.

import 'package:google_maps_flutter/google_maps_flutter.dart';

// 지도 표시 위젯
GoogleMap(
  initialCameraPosition: CameraPosition(
    target: LatLng(position.latitude, position.longitude),
    zoom: 14,
  ),
)

4. 지도 위에 가게 마커 표시

가져온 위치 주변의 가게 정보를 표시하기 위해, 지도 위에 마커를 표시해야 합니다.

// 마커 추가
Set<Marker> _markers = {};
_markers.add(
  Marker(
    markerId: MarkerId('someId'),
    position: LatLng(store.latitude, store.longitude),
    infoWindow: InfoWindow(
      title: store.name,
      snippet: store.address,
    ),
    icon: BitmapDescriptor.defaultMarker,
  ),
);

5. 선택한 가게 상세 정보 표시

사용자가 선택한 가게의 상세 정보를 표시하기 위해, 해당 가게의 정보를 상세 화면에 표시할 수 있습니다.

위와 같은 과정을 따라가면 플러터를 사용하여 위치 정보를 이용한 주변 치킨 배달 애플리케이션을 구현할 수 있습니다.

참고 문헌:

Flutter 공식 문서: https://flutter.dev/docs
geolocator 패키지: https://pub.dev/packages/geolocator
google_maps_flutter 패키지: https://pub.dev/packages/google_maps_flutter