[flutter] 플러터 geolocator를 이용한 위치 기반 실시간 배달 서비스 애플리케이션 개발 방법

04 Dec 2023

flutter

이 문서에서는 Flutter 프레임워크를 사용하여 위치 기반 실시간 배달 서비스 애플리케이션을 개발하는 방법에 대해 설명합니다. 이를 위해 Geolocator 패키지를 사용하여 사용자의 위치를 추적하고, Google Maps API를 통해 지도를 표시합니다.

Geolocator 패키지 설치

dependencies:
  flutter:
    sdk: flutter
  geolocator: ^7.1.0

pubspec.yaml 파일의 dependencies에 geolocator 패키지를 추가해주세요. 그리고 다음 명령어를 실행하여 패키지를 설치합니다:

flutter pub get

Android 권한 설정

android/app/src/main/AndroidManifest.xml 파일에 다음 코드를 추가하여 위치 권한을 요청합니다:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

위치 추적 코드 추가

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

class LocationTracker extends StatefulWidget {
  @override
  _LocationTrackerState createState() => _LocationTrackerState();
}

class _LocationTrackerState extends State<LocationTracker> {
  var _currentLocation;

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

  Future<void> _trackLocation() async {
    Geolocator.getPositionStream(
            desiredAccuracy: LocationAccuracy.high, distanceFilter: 10)
        .listen((Position position) {
      setState(() {
        _currentLocation = position;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Location Tracker')),
      body: Center(
        child: _currentLocation != null
            ? Text('Current Location: ${_currentLocation.latitude}, ${_currentLocation.longitude}')
            : CircularProgressIndicator(),
      ),
    );
  }
}

위 코드는 위치 추적을 위해 Geolocator 패키지를 사용한 최소한의 예제입니다. Geolocator.getPositionStream() 메서드를 사용하여 위치 업데이트를 구독하고, 새 위치가 감지될 때마다 화면을 갱신합니다.

Google Maps API 통합

Google Maps API를 통해 실제 지도를 표시하려면 다음 단계를 따르세요:

Google Cloud 콘솔에서 프로젝트를 만들고, Maps JavaScript API를 활성화하고 API 키를 발급받습니다.
android/app/src/main/AndroidManifest.xml 파일에 다음 코드를 추가하여 API 키를 설정합니다:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY"/>

pubspec.yaml 파일의 dependencies에 google_maps_flutter 패키지를 추가합니다:

dependencies:
  google_maps_flutter: ^2.0.10

위치 추적 코드에 다음 코드를 추가하여 지도를 표시합니다:

import 'package:google_maps_flutter/google_maps_flutter.dart';

class LocationTracker extends StatefulWidget {
  // ...
}

class _LocationTrackerState extends State<LocationTracker> {
  var _currentLocation;
  
  GoogleMapController? _mapController;
  
  @override
  void initState() {
    super.initState();
    _trackLocation();
  }
  
  // ...
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Location Tracker')),
      body: Column(
        children: [
          Expanded(
            child: GoogleMap(
              onMapCreated: (controller) {
                _mapController = controller;
              },
              initialCameraPosition: CameraPosition(
                target: LatLng(37.5665, 126.9780),
                zoom: 13,
              ),
              markers: {
                Marker(
                  markerId: MarkerId('currentLocation'),
                  position: LatLng(
                    _currentLocation?.latitude ?? 37.5665,
                    _currentLocation?.longitude ?? 126.9780,
                  ),
                  infoWindow: InfoWindow(title: 'Current Location'),
                ),
              },
            ),
          ),
          SizedBox(height: 16),
          _currentLocation != null
              ? Text('Current Location: ${_currentLocation.latitude}, ${_currentLocation.longitude}')
              : CircularProgressIndicator(),
        ],
      ),
    );
  }
}

주문 서비스 개발

위치 기반의 실시간 배달 애플리케이션을 완성하기 위해서는 주문 서비스 등 다른 기능들을 추가로 개발해야 합니다. 이는 애플리케이션의 목적과 요구사항에 따라 달라지므로, 자세한 내용은 해당 프로젝트의 스펙에 따라 진행하시면 됩니다.

추가 개발을 위해 Flutter 프레임워크의 다양한 기능을 활용하고, 적절한 상태 관리 패턴 등을 선택하여 구현하는 것이 좋습니다.

목차

Geolocator 패키지 설치

Android 권한 설정

위치 추적 코드 추가

Google Maps API 통합

주문 서비스 개발

참고 자료