6. Supabase 정보를 불러와 지도에 마커를 추가하는 기능 구현

소요시간

2025년 2월 3일 - 4시간

 

느낀점

 

앞장의 supabase를 연결해둔 덕에 쉽게 연결 할 수있었다.

생각한 흐름대로 흘러가니 기분이 좋았음 

 

 

 

 

 

사용법

사용법은 https://game-chanda.tistory.com/177

4. Supabase 연결 연습

 

 

 

 

테이블 데이터 불러오기

저번에 supabase 테이블을 미리 만들어둔걸 프로바인더로 관리하니까 편했다.

이걸 이용해서 

class DataProvider with ChangeNotifier {
  final supabase = Supabase.instance.client;
  List<dynamic> dataList = [];
  bool isLoading = false; // 로딩 상태 추가
  String? errorMessage; // 에러 메시지 추가
  late RealtimeChannel _realtimeChannel;

  // 생성자에서 실시간 구독 설정
  DataProvider() {
    setupRealtimeSubscription();
  }

  // 데이터 불러오기
  Future<void> fetchData() async {
    isLoading = true; // 로딩 시작
    errorMessage = null; // 에러 메시지 초기화
    notifyListeners(); // 상태 변경 알림

    try {
      final response = await supabase
          .from('modir')
          .select()
          .catchError((error) {
        print('Error fetching data: $error');
        errorMessage = error.toString(); // 에러 메시지 저장
        return null;
      });

      if (response != null) {
        dataList = response;
      }
    } catch (e) {
      print('Error: $e');
      errorMessage = e.toString(); // 에러 메시지 저장
    } finally {
      isLoading = false; // 로딩 종료
      notifyListeners(); // 상태 변경 알림
    }
  }

  // 실시간 구독 설정 (Supabase 최신 방식)
  void setupRealtimeSubscription() {
    _realtimeChannel = supabase.channel('modir_channel').onPostgresChanges(
      event: PostgresChangeEvent.all, // 모든 변경 감지
      schema: 'public',
      table: 'modir',
      callback: (payload) {
        fetchData(); // 변경 발생 시 데이터 갱신
      },
    ).subscribe();
  }

  // 리소스 정리
  void disposeProvider() {
    _realtimeChannel.unsubscribe();
  }

  // Provider가 dispose될 때 호출
  @override
  void dispose() {
    disposeProvider();
    super.dispose();
  }
}

 

 

 

 

 

 

마커들을 불러오는 함수와 , 데이터 변경시 마커가 업데이트 되게 만들었다.

  // 마커 리스트를 동적으로 생성하는 함수
  Set<NAddableOverlay> _buildMarkers(DataProvider dataProvider) {
    return dataProvider.dataList.map<NAddableOverlay>((item) {
      final double latitude = double.tryParse(item['mapy'].toString()) ?? 0;
      final double longitude = double.tryParse(item['mapx'].toString()) ?? 0;
      final String title = item['title'].toString();

      return NMarker(
        id: title,
        position: NLatLng(latitude, longitude),
        caption: NOverlayCaption(text: title), // 마커 캡션 추가
      );
    }).toSet(); // List -> Set 변환
  }

  // 데이터 변경 시 마커 업데이트
  void _updateMarkers(DataProvider dataProvider) {
    if (_mapController == null) return;

    final newMarkers = _buildMarkers(dataProvider);
    _mapController!.clearOverlays(); // 기존 마커 삭제
    _mapController!.addOverlayAll(newMarkers); // 새로운 마커 추가
  }
}

 

 

 

네이버 지도에 위도 경도 뿌려주기

 

NaverMap(
  onMapReady: (controller) {
    _mapController = controller; // 컨트롤러 저장
    _updateMarkers(dataProvider); // 마커 업데이트
  },

 

 

 

결과

 

 

끝