[flutter] 플러터 구글 지도 사용해보기 (google_maps_flutter, geolocator)

 ✍️ 개발환경 및 사용 라이브러리

• google_maps_flutter 2.1.1
• geolocator 8.1.1
• Flutter 3.7.12
• Android Studio Dolphin (2021.3.1 ver)
• kotlin / swift

---

✍️ 라이브러리 사용을 위한 기본세팅

🙋‍♂️ Dependencies

1. pubspec.yml 파일내 dependencies 추가  (dependencies: 하위의 cupertino_icons 아래 추가)

dependencies:
  cupertino_icons: ^1.0.2
  google_maps_flutter: ^2.1.1
  geolocator: ^8.1.1

 

 

🙋‍♂️ google_maps_flutter

https://pub.dev/packages/google_maps_flutter/versions/2.1.1

google_maps_flutter 2.1.1 | Flutter Package

Android

1. minSdkVersion 설정 ( android/app/build.gradle )

android {
    defaultConfig {
        minSdkVersion 20
    }
}

2. 구글 클라우드 플랫폼의 개인 API키 설정 ( android/app/src/main/AndroidManifest.xml )

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

* 'YOUR KEY HERE' 위치에 개인 API키 입력

구글 클라우드 접속하여 기본정보 및 결제정보 등록하시면 개인 API키 발급됩니다.

iOS

1. 구글 클라우드 플랫폼 개인 API키 설정 ( is/Runner/AppDelegate.swift ) 

   *AppDelegate.swift 파일의 기존내용에 아래 코드 덮어쓰면 됨

import UIKit
import Flutter
import GoogleMaps

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GMSServices.provideAPIKey("YOUR KEY HERE")
    GeneratedPluginRegistrant.register(with: self)
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

* 'YOUR KEY HERE' 위치에 개인 API키 입력

 

 

🙋‍♂️ geolocator

https://pub.dev/packages/geolocator/versions/8.1.1

geolocator 8.1.1 | Flutter Package

Android

1. 권한 설정 ( 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" />

  * 저는 ACCESS_FINE_LOCATION만 설정했습니다.

 

iOS

1. 권한 설정 ( 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>

* <string></string> 내부에는 원하는 메시지를 입력하시면 됩니다.  예시)  <string>위치정보가 필요합니다.</string>

 

---

✍️  코드 작성

 

🙋‍♂️ main.dart

void main() {
  runApp(const MaterialApp(
    home: HomeScreen(),
  ));
}

🙋‍♂️ main_screen.dart

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

class MainScreen extends StatefulWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  State<MainScreen> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  // latitude - 위도, longitude - 경도
  static final LatLng companyLatLng = LatLng(
    // 예시를 위한 위도 경도 임의값
    31.3214212,
    112.1456671,
  );

  static final CameraPosition initialPosition = CameraPosition(
    target: companyLatLng,
    zoom: 15,
  );

   @override
  Widget build(BuildContext context) {
    return Scaffold(      
      body: FutureBuilder(   
        future: checkPermission(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          return Column(
            children: [
              _CustomGoogleMap(
                initialPosition: initialPosition,
              ),
            ],
          );
        },
      ),
    );
  }

class _CustomGoogleMap extends StatelessWidget {
  final CameraPosition initialPosition;

  const _CustomGoogleMap({
    required this.initialPosition,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: initialPosition,
      ),
    );
  }
}

* FutureBuilder ?

1.  future :  checkPermission()  (권한요청 함수이며 포스팅 하단에 있음)
2. builder : BuildContext, AsyncSnapshot   (checkPermission()함수 실행 후 return에 있는 내용을 다시 build함)
3. AsynckSnapshot을 통해 데이터를 받을 수 있다.  (예시 -  아래코드)

FutureBuilder(
        future: checkPermission(),
        builder: (BuildContext context, AsyncSnapshot snapshot) {          
          print(snapshot.data);          
        },
      )

🙋‍♂️ 시뮬레이터에 빌드하여 결과확인

---

🙋‍♂️ 권한 요청 함수 (Geolocator)

Future<String> checkPermission() async {
    // 위치권한에 대한 서비스기능을 사용할 수 있는지 ?
    final isLocationEnabled = await Geolocator.isLocationServiceEnabled();

    if(!isLocationEnabled){
      return '위치 서비스를 활성화 해주세요';
    }

    //현재 앱이 가지고있는 위치서비스에 대한 권한이 어떻게 되는지 가져온다.
    LocationPermission checkedPermission = await Geolocator.checkPermission();

    // 위치권한 denied 상태일때 (권한 허용이 안되었지만 요청은 할 수 있는 상태)
    if(checkedPermission == LocationPermission.denied){      
      checkedPermission = await Geolocator.requestPermission(); // 권한 요청
      
      //권한 요청 후 또 다시 거부한 경우
      if(checkedPermission == LocationPermission.denied){
        return '위치 권한을 허가해주세요';
      }
    }
    
    // deniedForever상태인 경우 -> 기기 환경설정 위치설정에서 허가해주어야 함
    if(checkedPermission == LocationPermission.deniedForever) {
      return '앱의 위치 권한을 기기 세팅에서 허가해주세요';
    }
    
    return '위치 권한이 허용되었습니다.';
  }

 

 

* 이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.