플러터(Flutter) 앱을 개발할 때, Google Maps와의 연동은 매우 일반적인 요구사항입니다. 이를 위해 Riverpod 상태 관리 라이브러리를 사용하여 Google Maps를 플러터 앱에 통합해 볼 것입니다.
개요
Google Maps와의 연동을 위해서는 Google Maps API 키가 필요합니다. Google Cloud Platform 콘솔에서 프로젝트를 만들고, Maps SDK for Android와 Maps SDK for iOS를 활성화한 후, API 키를 생성해야 합니다.
Riverpod 설정
먼저, pubspec.yaml 파일에 google_maps_flutter 패키지를 추가하세요. 이 패키지는 Google Maps 앱을 사용할 수 있도록 해줍니다.
dependencies:
flutter:
sdk: flutter
google_maps_flutter: ^2.1.0
업데이트를 위해 pub get 명령을 실행하세요.
그리고, main.dart 파일에서 Riverpod를 설정합니다.
import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';
import 'package:riverpod/riverpod.dart';
final googleMapProvider = Provider<GoogleMapController>((ref) {
return GoogleMapController(
// Google Maps API 키 입력
options: GoogleMapOptions(
apiKey: 'YOUR_API_KEY',
),
);
});
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Google Maps with Riverpod',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}
class HomePage extends ConsumerWidget {
@override
Widget build(BuildContext context, ScopedReader watch) {
final controller = watch(googleMapProvider);
return Scaffold(
appBar: AppBar(
title: Text('Google Maps with Riverpod'),
),
body: GoogleMap(
initialCameraPosition: CameraPosition(
target: LatLng(37.532600, 127.024612), // 초기 위치 설정
zoom: 10, // 초기 줌 레벨 설정
),
onMapCreated: (controller) {}, // Google Map이 생성되었을 때 실행할 콜백 함수
),
);
}
}
위의 코드에서 주석 부분을 찾아서 YOUR_API_KEY를 Google Cloud Platform에서 생성한 API 키로 대체하세요.
동작 확인
앱을 실행하여 Google Maps를 확인해보세요. 초기 위치는 서울로 설정되어 있으며, 콘솔에 flutter run 명령을 실행하여 앱을 빌드 및 실행할 수 있습니다.
결론
이제 Riverpod 상태 관리 라이브러리를 사용하여 플러터 앱에 Google Maps를 통합할 수 있는 방법을 알게 되었습니다. Google Maps API 키를 생성하고, google_maps_flutter 패키지를 사용하여 플러터와 Google Maps를 연동할 수 있습니다.