[Dart, Flutter] Flutter_Map에서 Device 위치 받아오기(Geolocator)

이전 글에서는 Flutter_Map 을 이용하여 Device에 Map 화면을 띄우는 방법을 설명했습니다.

이번에는 Device의 현재 위치를 기준으로 Map을 띄우는 방법을 설명하겠습니다.

 

사용할 패키지는 Geolocator 라는 Plugin 입니다.

먼저 pubspec.yaml 파일에 해당 구문을 추가해주고 pub get을 통해 설치해줍시다.

geolocator: ^10.1.0

 

이제 Device의 OS 마다 별도의 추가적인 Setting이 필요한데 잘 따라오시면 문제없을듯 합니다.

• Android

android/gradle.properties 파일에 해당 구문을 추가해줍시다.

android.useAndroidX=true
android.enableJetifier=true

 

android/app/build.gradle 파일에 해당 구문을 추가해주세요.

android {
  compileSdkVersion 33

  ...
}

 

android/app/src/main/AndroidManifest.xml 파일에 해당 구문을 추가해주세요.

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

Android 환경에서는 이렇게 세팅해주시면 끝납니다.

 

• iOS

ios/Runner/info.plist 에 다음 구문을 추가해주세요.

<key>NSLocationWhenInUseUsageDescription</key>
<string>This app needs access to location when open.</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>This app needs access to location when in the background.</string>
<key>NSLocationTemporaryUsageDescriptionDictionary</key>
<dict>
  <key>YourPurposeKey</key>
  <string>The example App requires temporary access to the device&apos;s precise location.</string>
</dict>

 

이제 package를 이용하여 함수를 작성해봅시다.

Future<Position> getCurrentLocation() async{
    bool serviceEnabled;
    LocationPermission permission;

    // 위치 서비스가 활성화되어 있는지 확인
    serviceEnabled = await Geolocator.isLocationServiceEnabled();
    if (!serviceEnabled) {
      return Future.Error('위치를 받아올 수 없습니다.'); // 위치 서비스가 비활성화된 경우 추가 작업을 수행하지 않음
    }
	
    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission != LocationPermission.whileInUse &&
          permission != LocationPermission.always) {
        return Future.Error('위치를 받아올 수 없습니다.'); // 권한이 거부된 경우 추가 작업을 수행하지 않음
      }
    }
    final Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.best);
    return position;
}

 

Flutter Map 에 사용하기 위해선 해당 position 객체를 LatLng 객체로 변환시켜줘야 합니다.

latLng.LatLng? currentLocation = latLng.LatLng(position.latitude, position.longitude);

 

currentLocation을 이용하여 Flutter Map 객체의 initialCenter를 바꾸어 주면 됩니다.

Widget build(BuildContext context) {
  return FlutterMap(
    options: MapOptions(
      initialCenter: currentLocation ?? latLng.LatLng(51.509364, -0.128928), // 디바이스의 현재위치로 설정
      initialZoom: 9.2,
    ),
    children: [
      TileLayer(
        urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
        userAgentPackageName: 'com.example.app',
      ),
    ],
  );
}

 

거부당한 경우는 Docs에 나와있던 런던(?)의 위치로 화면을 돌려줍시다. (아무 위치나 지정하셔도 상관없습니다!)

 

참고로 Simulator를 사용하는 경우 Simulator의 고유 위치로 설정되는 경우가 있습니다. (보통 미국으로 잡혔던 기억이..)

이런 경우에는 Simulator 환경에서는 테스트하기가 많이 어렵습니다.. ㅜㅜ (저도 Simulator의 위치를 정적으로 설정하여 App 테스트했습니다..)

 

참고자료: https://pub.dev/packages/geolocator