[flutter] 플러터에서 위치 정보를 이용한 근처 공원 소개 앱 만들기

12 Dec 2023

flutter

플러터를 사용하여 위치 정보를 활용하여 근처 공원을 찾아 소개하는 애플리케이션을 만들어 보겠습니다. 사용자의 현재 위치를 가져오고, 그 위치 주변에 있는 공원들을 표시하여 사용자에게 제공하는 기능을 구현할 것입니다.

목표

사용자의 현재 위치를 가져오는 방법 이해하기
위치 정보를 이용하여 근처의 공원을 탐색하는 방법 습득하기
플러터를 사용하여 위치 정보를 표시하는 애플리케이션을 만드는 방법 이해하기

단계

위치 권한 획득: 사용자의 위치 정보를 가져오기 전에 위치 권한을 허용받아야 합니다.
위치 정보 가져오기: 사용자의 현재 위치를 가져올 수 있는 방법을 이해하고 구현합니다.
공원 데이터 가져오기: 위치 정보를 기반으로 근처 공원 데이터를 가져옵니다.
UI 구성: 가져온 공원 데이터를 표시할 수 있는 UI를 만듭니다.
지도 표시: 가져온 위치 정보와 공원 데이터를 지도에 표시해줍니다.

위치 권한 획득

사용자의 현재 위치를 가져오기 위해서는 위치 권한을 허용받아야 합니다. geolocator 패키지를 사용하여 위치 권한을 요청하고 사용자의 위치 정보를 가져올 수 있습니다.

import 'package:geolocator/geolocator.dart';

void main() async {
  // 위치 권한 요청
  LocationPermission permission = await Geolocator.requestPermission();
  if (permission == LocationPermission.denied) {
    // 권한이 거부된 경우 처리
  } else {
    // 위치 정보 가져오기
    Position position = await Geolocator.getCurrentPosition(
        desiredAccuracy: LocationAccuracy.high);
    print(position.latitude);
    print(position.longitude);
  }
}

공원 데이터 가져오기

위치 정보를 기반으로 공원 데이터를 가져오기 위해서는 공원 정보가 있는 API를 호출해야 합니다. 예를 들어, Google Places API를 이용하여 주변 공원을 검색할 수 있습니다.

import 'package:http/http.dart' as http;
import 'dart:convert';

Future<void> fetchNearbyParks(Position position) async {
  // 위치 정보를 이용하여 API 호출
  String url =
      'https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${position.latitude},${position.longitude}&radius=1000&type=park&key=YOUR_API_KEY';
  var response = await http.get(Uri.parse(url));
  var data = json.decode(response.body);
  // 가져온 데이터를 처리하여 UI에 표시
}

UI 구성 및 지도 표시

가져온 공원 데이터를 UI에 표시하는 방법은 여러 가지가 있겠지만, google_maps_flutter 패키지를 사용하여 지도에 공원을 표시하는 방법을 알아보겠습니다.

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

class ParkMap extends StatefulWidget {
  @override
  _ParkMapState createState() => _ParkMapState();
}

class _ParkMapState extends State<ParkMap> {
  GoogleMapController mapController;

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

  @override
  Widget build(BuildContext context) {
    return GoogleMap(
      onMapCreated: _onMapCreated,
      initialCameraPosition: CameraPosition(
        target: LatLng(37.7749, -122.4194),
        zoom: 12.0,
      ),
    );
  }
}

위 코드는 Google Map을 표시하는 간단한 예제입니다.

위치 권한을 획득하고 사용자의 위치 정보를 가져와서, 그 위치 주변에 있는 공원을 찾아 지도에 표시하는 애플리케이션을 만드는 것을 경험해 보시기 바랍니다.

마지막으로, 샘플 코드에서 사용한 API 키 및 라이브러리 버전은 관련된 문서를 참고하여 각자의 환경에 맞게 업데이트해주세요.

목표

단계

위치 권한 획득

공원 데이터 가져오기

UI 구성 및 지도 표시

참고 자료