[flutter] 플러터 Riverpod를 사용하여 앱에 지도 기능을 추가하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

이번 튜토리얼에서는 Flutter 앱에 Riverpod 상태 관리 패키지를 사용하여 지도 기능을 추가하는 방법에 대해 알아보겠습니다.

Riverpod 소개

Riverpod는 Flutter 애플리케이션의 상태 관리를 위한 강력한 패키지입니다. 이 패키지는 프로바이더(provider)라고 불리는 개념을 사용하여 앱의 상태를 관리하고, 이를 통해 더욱 체계적이고 효율적인 상태 관리를 할 수 있습니다.

Flutter 앱에 지도 기능 추가하기

google_maps_flutter 패키지 추가하기

먼저, google_maps_flutter 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 아래와 같은 의존성을 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.6

Provider 패키지 및 Riverpod 추가하기

Riverpod를 사용하기 위해서는 flutter_riverpod 패키지도 설치해야 합니다. pubspec.yaml 파일에 아래와 같은 의존성을 추가하세요:

dependencies:
  flutter_riverpod: ^1.0.4

지도 위젯 생성

이제 Flutter 앱에서 지도를 표시할 위젯을 생성해야 합니다. 이를 위해 GoogleMap 위젯을 사용하여 지도를 표시하고 설정할 수 있습니다. 아래는 기본적인 예제 코드입니다:

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

class MapScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('지도'),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.5665, 126.9780), // 지도의 중심 좌표 설정
          zoom: 15, // 초기 줌 레벨 설정
        ),
      ),
    );
  }
}

상태 관리 설정

이제 Riverpod를 사용하여 지도 위젯의 상태를 관리하고 업데이트할 수 있도록 설정해야 합니다. riverpod 라이브러리에서 제공하는 Provider 클래스를 사용하여 상태를 정의하고 사용할 수 있습니다. 아래는 예시 코드입니다:

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

// 상태 관리를 위한 Provider 정의
final mapProvider = Provider<GoogleMapController>((ref) {
  // GoogleMapController를 생성하여 반환
  return GoogleMapController();
});

class MapScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    // mapProvider로부터 GoogleMapController를 가져옴
    final mapController = watch(mapProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('지도'),
      ),
      body: GoogleMap(
        initialCameraPosition: CameraPosition(
          target: LatLng(37.5665, 126.9780),
          zoom: 15,
        ),
        onMapCreated: (controller) {
          // 지도가 생성되었을 때 GoogleMapController 설정
          mapController = controller;
        },
      ),
    );
  }
}

이제 mapProvider를 사용하여 GoogleMapController를 관리하고, GoogleMap 위젯의 onMapCreated 콜백을 통해 컨트롤러를 설정해 줍니다.

실행해보기

이제 앱을 실행하고 지도가 정상적으로 표시되는지 확인해주세요. 위 코드의 경우, 초기 카메라 위치는 Seoul의 좌표로 설정되어 있습니다. 필요에 따라 이를 수정하거나 사용자의 위치로 설정할 수도 있습니다.

이제 플러터 Riverpod를 사용하여 Flutter 앱에 지도 기능을 추가하는 방법에 대해 알아보았습니다. 상태 관리 라이브러리인 Riverpod를 통해 앱의 상태를 보다 쉽게 관리하고 업데이트할 수 있습니다.