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

12 Dec 2023

flutter

이번에는 플러터(Flutter)를 사용하여 사용자의 위치 정보를 활용해 주변 치킨 배달 가게를 찾아주는 애플리케이션을 만들어보겠습니다.

목표

플러터를 사용하여 지도와 위치 서비스를 통합한 애플리케이션을 개발하는 방법을 이해합니다.
내 위치를 기반으로 한 Google Maps API를 통해 주변 치킨 배달 가게 목록을 가져와 표시하는 방법을 배웁니다.
플러터에서 Google Maps와 위치 서비스를 함께 사용하는 방법을 습득합니다.

준비물

Flutter SDK: Flutter 애플리케이션 개발을 위한 SDK
Flutter 개발 환경: 안드로이드 스튜디오 또는 비주얼 스튜디오 코드
Google Cloud 계정: Google Maps API를 사용하기 위한 계정

단계별 가이드

단계 1: Flutter 프로젝트 설정

먼저, Flutter를 사용하여 새로운 프로젝트를 설정합니다. 터미널에서 다음 명령어를 실행하여 새로운 Flutter 프로젝트를 생성합니다.

flutter create chicken_delivery_app

단계 2: Google Maps API 키 발급

Google Cloud에서 Maps JavaScript API 및 Geocoding API를 활성화하고 API 키를 발급받습니다. Google Cloud Console 에서 API를 활성화하고 API 키를 생성합니다.

단계 3: Google Maps 플러그인 추가

pubspec.yaml 파일에 다음과 같이 google_maps_flutter 플러그인을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.3

그리고 다음 명령어를 실행하여 플러그인을 설치합니다.

flutter pub get

단계 4: 위치 서비스 퍼미션 설정

앱이 위치 서비스에 접근할 수 있도록 퍼미션을 설정합니다. AndroidManifest.xml 파일에 다음과 같이 권한을 추가합니다.

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

단계 5: 지도 표시 및 위치 정보 가져오기

Flutter에서 Google Maps를 표시하고 사용자의 현재 위치를 가져오기 위해 필요한 코드를 구현합니다.

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

class ChickenDeliveryMap extends StatefulWidget {
  @override
  _ChickenDeliveryMapState createState() => _ChickenDeliveryMapState();
}

class _ChickenDeliveryMapState extends State<ChickenDeliveryMap> {
  GoogleMapController mapController;
  Location location = Location();
  LatLng _center;

  void _onMapCreated(GoogleMapController controller) {
    mapController = controller;
  }

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

  void _getUserLocation() async {
    var currentLocation = await location.getLocation();
    setState(() {
      _center = LatLng(currentLocation.latitude, currentLocation.longitude);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Chicken Delivery Map'),
        backgroundColor: Colors.red,
      ),
      body: GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: CameraPosition(
          target: _center,
          zoom: 14.0,
        ),
      ),
    );
  }
}

단계 6: 주변 치킨 배달 가게 표시

Google Places API를 사용하여 사용자의 현재 위치 주변의 치킨 배달 가게 정보를 가져와 지도에 표시합니다. 해당 기능을 구현하기 위해서는 추가적인 코드와 Google Places API 키가 필요합니다.

마치며

위의 단계를 따라가면서 플러터를 사용하여 위치 정보를 활용한 주변 치킨 배달 애플리케이션을 만들어보았습니다. Google Maps API 및 Google Places API와 플러터를 함께 사용하여 강력하고 유용한 지도 기반 애플리케이션을 구현할 수 있습니다. 여기서는 간단한 예제를 다루었지만, 더 많은 기능과 개선을 통해 실제 서비스 수준의 애플리케이션을 만들 수 있을 것입니다.

Happy coding! 🚀