[flutter] 플러터에서 위치 기반 지역 검색 기능 구현하기

12 Dec 2023

flutter

모바일 앱을 개발하는 중에 위치 기반 서비스는 매우 중요합니다. 플러터(Flutter)에서는 사용자의 현재 위치 주변의 지역을 검색하는 기능을 구현하는 것이 가능합니다. 이번 글에서는 플러터를 이용하여 위치 기반 지역 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

사용되는 패키지

이 기능을 구현하기 위해 다음과 같은 패키지를 사용할 것입니다:

geolocator: 사용자의 현재 위치 정보를 가져오기 위한 패키지
flutter_map: 지도를 표시하고 지역 검색 결과를 시각적으로 보여주기 위한 패키지
flutter_places: Google Places API를 이용하여 지역을 검색하는 패키지

현재 위치 정보 가져오기

먼저, 사용자의 현재 위치 정보를 가져와야 합니다. geolocator 패키지를 사용하여 이를 구현할 수 있습니다. 아래는 사용자의 현재 위치를 가져오는 예제 코드입니다:

import 'package:geolocator/geolocator.dart';

Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);

위 코드에서 getCurrentPosition 함수를 사용하여 사용자의 현재 위치 정보를 가져옵니다.

지도 표시하기

다음으로, 사용자의 위치를 중심으로 하는 지도를 플러터 앱에 표시해야 합니다. flutter_map 패키지를 사용하여 이를 구현할 수 있습니다. 아래는 지도를 표시하는 예제 코드입니다:

import 'package:flutter_map/flutter_map.dart';
import 'package:latlong/latlong.dart';

MapController mapController = MapController();
LatLng userLocation = LatLng(position.latitude, position.longitude);

FlutterMap(
  options: MapOptions(
    center: userLocation,
    zoom: 13.0,
    controller: mapController,
  ),
  layers: [
    TileLayerOptions(
      urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
      subdomains: ['a', 'b', 'c'],
    ),
    MarkerLayerOptions(markers: [
      Marker(
        width: 40.0,
        height: 40.0,
        point: userLocation,
        builder: (context) => Container(
          child: Icon(
            Icons.location_on,
            color: Colors.red,
            size: 40.0,
          ),
        ),
      ),
    ]),
  ],
);

위 코드에서는 flutter_map 을 사용하여 사용자의 현재 위치를 중심으로 하는 지도를 만들고 표시합니다.

지역 검색 기능 추가하기

마지막으로, 사용자가 특정 지역을 검색할 수 있는 기능을 추가해야 합니다. flutter_places 패키지를 사용하여 이를 구현할 수 있습니다. 아래는 지역을 검색하는 예제 코드입니다:

import 'package:flutter_places/flutter_places.dart';

List<Place> places = await FlutterPlaces.autocomplete(searchInput);

위 코드에서 autocomplete 함수를 사용하여 지역을 검색하고 결과를 받아옵니다.

이제 위 세 가지 단계를 통해 위치 기반 지역 검색 기능을 갖춘 플러터 앱을 구현할 수 있습니다. 사용자는 현재 위치를 기준으로 지도를 보고, 특정 지역을 검색할 수 있게 될 것입니다.

참고: geolocator 패키지, flutter_map 패키지, flutter_places 패키지

본 예제에서 사용된 모든 패키지는 pub.dev에서 확인하실 수 있습니다.