우선 구글맵 사용을 위해 google_maps_fultter 패키지를 사용해야합니다.
아래 링크를 가서 설치를 해봅시다.
https://pub.dev/packages/google_maps_flutter/install
터미널에 아래 명령어를 입력하면 자동으로 pubspec.yaml 에서 dependencies 에 추가된 것을 확인할 수 있습니다.
flutter pub add google_maps_flutter
다음은 상태 관리를 위해 provider 패키지를 사용하려고 합니다. 아래 링크가 상태관리에 관한 공식 문서입니다.
https://docs.flutter.dev/data-and-backend/state-mgmt
문서 정리 내용(flutter 의 상태 관리에 대해)Flutter 앱 개발에서 앱의 상태가 변경되면 (예: 사용자가 설정 화면에서 스위치를 조작하는 경우) UI는 자동으로 다시 그려집니다.이는 선언적 UI 프로그래밍 방식에 따른 것으로, 상태가 변경되면 UI가 자동으로 업데이트되어 개발자가 UI를 직접 수정할 필요가 없습니다.
Flutter에서는 크게 두 종류의 상태를 관리하는데 임시 상태와 앱 상태입니다.
임시상태 : 단일 위젯에 국한되며, 복잡한 상태 관리 기법을 필요로 하지 않습니다. 예를 들어, 현재 페이지 번호, 애니메이션 진행률, 선택된 탭 등이 이에 해당합니다. 이러한 상태는 State와 setState()를 사용하여 관리할 수 있습니다.
앱상태: 앱의 여러 부분에서 공유되며, 사용자 세션 간에 유지되어야 하는 정보입니다. 사용자 설정, 로그인 정보, 소셜 알림, 장바구니 내용 등이 앱 상태의 예입니다. 이러한 상태의 관리 방법은 앱의 복잡성, 팀의 경험 등에 따라 달라질 수 있습니다.
Flutter 앱에서는 임시 상태와 앱 상태 모두를 효율적으로 관리할 수 있는 다양한 방법이 있으며, 어떤 방법을 선택할지는 주로 개발자의 선호도와 앱의 요구 사항에 따라 결정됩니다. Redux의 저자 Dan Abramov의 말처럼, "덜 어색한 것을 사용하세요"라는 경험 법칙이 적용됩니다.
이제 상태 관리를 위해 provider 를 사용할 것입니다.
Flutter에 익숙하지 않고 다른 접근법(Redux, Rx, hooks 등)을 선택할 강력한 이유가 없다면, provider를 시작점으로 삼는 것이 좋습니다. provider 패키지는 이해하기 쉽고 코드가 많지 않으며, 다른 모든 접근법에서 적용 가능한 개념을 사용합니다.
provider 도 설치를 위해 터미널에 아래 명령어를 입력했습니다.
flutter pub add provider
sizer 은 다양한 화면 크기에 맞게 ui 를 조정해주는 패키지 입니다.
https://pub.dev/packages/flutter_sizer
provider 도 설치를 위해 터미널에 아래 명령어를 입력했습니다.
flutter pub add sizer
아래 사이트에서 구글 지도 사용을 위해 api 키를 발급받아야 합니다.
https://developers.google.com/maps?hl=ko
키를 발급 받은 후
프로젝트 내부 android/src/main/AndroidManifest.xml 파일에 들어가서 아래 코드를 추가해주면 됩니다. application 태그 내부에
아래 내용에서 YOUR KEY HERE 이라는 부분에 내 api 키로만 변경한 후 넣어주면 됩니다.
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
위치 잘 모르면 다음과 같은 위치입니다.
<manifest ...
<application ...
<meta-data android:name="com.google.android.geo.API_KEY"
android:value="YOUR KEY HERE"/>
그리고 android/app/build.gradle 에 있는 minSdkVersion 에서
버전을 아래처럼 수정해야 합니다.
android {
defaultConfig {
minSdkVersion 20
}
}
ios 에서는 ios/Runner/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)
}
}
이렇게 초기 설치가 완료되었고 다음 게시글에 한 번 사용해보려고 합니다!