[flutter] 플러터 geolocator를 이용한 위치 기반 실시간 카페 정보 애플리케이션 개발

04 Dec 2023

flutter

소개

이번 프로젝트에서는 Flutter와 Geolocator 패키지를 사용하여 위치 기반 실시간 카페 정보 애플리케이션을 개발할 것입니다. Geolocator 패키지는 사용자의 현재 위치를 가져오고 관리할 수 있는 기능을 제공합니다. 이를 활용하여 사용자의 위치를 기준으로 가까운 카페의 정보를 가져와서 표시할 수 있습니다.

Geolocator 패키지 설치

Geolocator 패키지를 사용하기 위해서는 먼저 프로젝트의 pubspec.yaml 파일에 패키지를 추가해야 합니다. 아래와 같이 dependencies 섹션에 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  geolocator: ^7.0.3

그리고 나서 pub get 명령을 실행하여 패키지를 설치합니다. 이제 Geolocator 패키지를 사용할 수 있습니다.

위치 권한 설정

안드로이드와 iOS에서 위치 정보를 가져오려면 권한을 설정해야 합니다. 안드로이드의 경우 AndroidManifest.xml 파일에 아래와 같이 위치 권한을 추가합니다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.your_app_package_name">
    
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    
    <application
        ...
    </application>
</manifest>

iOS의 경우 Info.plist 파일에 아래와 같이 위치 권한을 추가합니다.

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your location is needed to find nearby cafes.</string>

위치 권한 설정이 완료되었습니다.

위치 정보 가져오기

이제 Geolocator 패키지를 사용하여 사용자의 현재 위치를 가져오는 기능을 구현해보겠습니다. 먼저 geolocator 패키지를 임포트합니다.

import 'package:geolocator/geolocator.dart';

그리고 아래와 같이 사용자의 현재 위치를 가져오는 함수를 작성합니다.

Future<Position> getCurrentLocation() async {
  Position position = await Geolocator.getCurrentPosition(
    desiredAccuracy: LocationAccuracy.high,
  );
  return position;
}

getCurrentPosition 함수를 호출하면 사용자의 현재 위치를 반환합니다. desiredAccuracy 매개변수를 사용하여 위치의 정확도를 조정할 수 있습니다.

가까운 카페 정보 가져오기

위치 정보를 가져왔으므로 이제 가까운 카페의 정보를 가져와서 애플리케이션에 표시해보겠습니다. 가까운 카페 정보를 가져오기 위해 외부 API를 사용할 수도 있지만, 이 예제에서는 간단히 더미 데이터를 사용하도록 하겠습니다.

List<Cafe> getCafesNearby(Position position) {
  // 가까운 카페 정보를 가져오는 로직 작성
}

class Cafe {
  final String name;
  final double distance;

  Cafe({required this.name, required this.distance});
}

getCafesNearby 함수에서는 더미 데이터를 만들어 사용자의 위치와 거리를 기준으로 가까운 카페의 정보를 가져옵니다. 실제로는 외부 API를 호출하여 데이터를 가져오는 로직을 구현해야 합니다.

애플리케이션 개발

이제 위치 정보와 가까운 카페 정보를 가져오는 로직이 준비되었으므로, Flutter를 사용하여 애플리케이션을 개발해보겠습니다. 필요한 위젯과 UI 디자인은 각자의 취향에 따라 직접 구현하시면 됩니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cafe Finder',
      home: CafeListScreen(),
    );
  }
}

class CafeListScreen extends StatefulWidget {
  @override
  _CafeListScreenState createState() => _CafeListScreenState();
}

class _CafeListScreenState extends State<CafeListScreen> {
  Position? _userLocation;
  List<Cafe> _cafes = [];

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

  Future<void> _getCurrentLocation() async {
    Position position = await getCurrentLocation();
    setState(() {
      _userLocation = position;
      _cafes = getCafesNearby(position);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cafe Finder'),
      ),
      body: ListView.builder(
        itemCount: _cafes.length,
        itemBuilder: (context, index) {
          Cafe cafe = _cafes[index];
          return ListTile(
            title: Text(cafe.name),
            subtitle: Text('${cafe.distance} km away'),
            trailing: Icon(Icons.arrow_forward),
          );
        },
      ),
    );
  }
}

위 코드에서는 CafeListScreen 위젯에서 사용자의 위치를 가져오고, 그 위치를 기준으로 가까운 카페 정보를 가져와서 ListView에 표시합니다.

결론

위에서는 Flutter의 Geolocator 패키지를 사용하여 위치 기반 실시간 카페 정보 애플리케이션을 개발하는 방법을 소개했습니다. Geolocator 패키지의 다양한 기능을 활용하여 실제 서비스에 적용할 수 있는 다양한 위치 기반 애플리케이션을 개발할 수 있습니다.

소개

Geolocator 패키지 설치

위치 권한 설정

위치 정보 가져오기

가까운 카페 정보 가져오기

애플리케이션 개발

결론

참고 자료