[flutter] 플러터 프로바이더를 사용한 맵 관리

14 Dec 2023

flutter

플러터(Flutter)와 프로바이더(Provider)를 사용하여 애플리케이션에서 맵을 사용하는 방법을 알아봅시다. 이를 통해 맵 관리에 대한 강력한 상태 관리 기능과 재사용성을 제공할 수 있습니다.

1. 프로바이더를 이용한 맵 데이터 관리

애플리케이션에서 맵 데이터를 관리하기 위해 먼저 provider 패키지를 추가해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

맵 데이터 모델 생성

다음으로 맵 데이터 모델을 만듭니다. 예를 들어, 위치 정보와 마커 정보를 포함하는 MapModel 클래스를 생성합니다.

class MapModel {
  final double latitude;
  final double longitude;
  final String markerTitle;

  MapModel({required this.latitude, required this.longitude, required this.markerTitle});
}

프로바이더 클래스 생성

맵 데이터를 관리하는 프로바이더 클래스를 생성합니다. 아래는 MapProvider 클래스의 예시입니다.

import 'package:flutter/material.dart';

class MapProvider extends ChangeNotifier {
  MapModel _mapData = MapModel(latitude: 37.5, longitude: 127.0, markerTitle: '서울');

  MapModel get mapData => _mapData;

  void updateMapData(MapModel newMapData) {
    _mapData = newMapData;
    notifyListeners();
  }
}

2. 프로바이더 제공 및 사용

프로바이더 제공

프로바이더를 제공하여 애플리케이션 전체에서 상태를 공유할 수 있도록 합니다.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => MapProvider(),
      child: MyApp(),
    ),
  );
}

프로바이더 사용

맵 위젯에서 프로바이더를 사용하여 데이터를 업데이트하고 표시할 수 있습니다.

Consumer<MapProvider>(
  builder: (context, mapProvider, _) {
    return MapView(
      latitude: mapProvider.mapData.latitude,
      longitude: mapProvider.mapData.longitude,
      markerTitle: mapProvider.mapData.markerTitle,
      onMapDataChanged: (newMapData) {
        mapProvider.updateMapData(newMapData);
      },
    );
  },
),

위의 예제에서 MapView는 실제 맵을 표시하는 위젯이며, onMapDataChanged 콜백을 통해 새로운 맵 데이터를 업데이트합니다.

결론

플러터와 프로바이더를 사용하여 맵을 관리하는 방법에 대해 알아보았습니다. 프로바이더를 통해 강력한 상태 관리와 재사용성을 제공함으로써 애플리케이션에서 맵을 보다 효율적으로 관리할 수 있습니다.

이를 통해 애플리케이션의 맵 관련 기능을 더욱 유연하고 확장 가능하게 만들 수 있습니다.

참고: 플러터 공식 문서 - Provider