버전 1.3.0+1 클러스트 마커 사용 문의

[tkdtn2013]

클러스트 마커를 사용하면, NMarker에 icon tint Color는 변경이 불가능할까요??
tintColor를 변경하였지만, 클러스트 마커에 색상이 변경이 될 뿐 마커에 색상이 변경이 되지않아 문의 드립니다.

[note11g]

안녕하세요:) 해당 현상이 재현 가능한 샘플 코드 부탁드리겠습니다!

[tkdtn2013]

안녕하세요
문의 드릴 사항이 1가지 더 늘었는데요.

현재 지도상에 있는 마커에 대해서 필터 기능을 넣었는데요.
setIsVisible 함수를 이용해서 보이고 안보이고를 했습니다.

그리고 마커를 클릭 시 클릭된 마커에 색상을 setIconTintColor를 이용해서 선택된 마커로 보이기 위해 색상을 변경하는 기능을 넣었습니다.

이번 1.3.0에 추가된 클러스트 마커를 적용 후에는 setIsVisible과 setIconTintColor이 정상적으로 동작이 되지않아 문의 드립니다.

예시 소스 만들어서 전달 드려요.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_naver_map/flutter_naver_map.dart';

class MapTestScreen extends StatefulWidget {
  const MapTestScreen({super.key});

  @override
  State<MapTestScreen> createState() => _MapTestScreenState();
}

class _MapTestScreenState extends State<MapTestScreen>
    with AutomaticKeepAliveClientMixin {
  final mapSampleData = [
    {
      "id": 10623,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 무학로 33",
      "Latitude": "37.5685653",
      "Longitude": "127.0279662"
    },
    {
      "id": 10624,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 마장로137",
      "Latitude": "37.5693623",
      "Longitude": "127.0247156"
    },
    {
      "id": 10625,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 왕십리로410",
      "Latitude": "37.56611",
      "Longitude": "127.0276467"
    },
    {
      "id": 10626,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 무학로 50",
      "Latitude": "37.5687032",
      "Longitude": "127.0316644"
    },
    {
      "id": 10627,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 무학로6길 50",
      "Latitude": "37.5643927",
      "Longitude": "127.0349365"
    },
    {
      "id": 10628,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 무학로12길 11",
      "Latitude": "37.5674701",
      "Longitude": "127.0313862"
    },
    {
      "id": 10629,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 왕십리로28길 15",
      "Latitude": "37.5651359",
      "Longitude": "127.0315808"
    },
    {
      "id": 10630,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 무학봉길 69 정문 앞",
      "Latitude": "37.56106",
      "Longitude": "127.0305013"
    },
    {
      "id": 10631,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 무학봉길 69 1층 청사 내",
      "Latitude": "37.56106",
      "Longitude": "127.0305013"
    },
    {
      "id": 10632,
      "created_at": "2024-07-03 11:16:25.803387+00",
      "type": "LBCB",
      "type_name": "폐형광등, 폐건전지 수거함",
      "address": "서울특별시 성동구 난계로 100",
      "Latitude": "37.5604583",
      "Longitude": "127.0247891"
    }
  ];

  bool isVisibleLBCB = true;

  final Set<NMarker> marks = {};
  late List filterArr;
  late NaverMapController _naverMapController;
  final NaverMapViewOptions _naverMapViewOptions = const NaverMapViewOptions(
    initialCameraPosition:
        NCameraPosition(target: NLatLng(37.5685653, 127.0279662), zoom: 14),
    rotationGesturesEnable: false,
    consumeSymbolTapEvents: false,
    extent: NLatLngBounds(
      southWest: NLatLng(31.43, 122.37),
      northEast: NLatLng(44.35, 132.0),
    ),
  );

  void onMarkTap(NMarker marker) {
    for (var item in marks) {
      item.setIconTintColor(Colors.transparent);
    }

    marker.setIconTintColor(const Color.fromARGB(255, 140, 0, 255));
  }

  Set<NClusterableMarker> buildClusterMarkers(
      List<Map<String, dynamic>> data, listener) {
    return data.map((item) {
      double latitude = double.parse(item['Latitude']);
      double longitude = double.parse(item['Longitude']);
      final type = item['type'];
      final typeName = item['type_name'];
      final address = item['address'];

      final mark = NClusterableMarker(
        id: '${item['id'].toString()}_${type.toString()}_${typeName.toString()}_${address.toString()}',
        position: NLatLng(latitude, longitude),
        size: const Size(30, 40),
        isHideCollidedMarkers: true,
      );
      mark.setOnTapListener(listener);

      return mark;
    }).toSet();
  }

  Widget _fillterMenu(String title, IconData icon, String type, int index) {
    return TextButton(
      onPressed: () {
        setState(() {
          switch (type) {
            case 'LBCB':
              isVisibleLBCB = !isVisibleLBCB;
              filterArr[index][1] = isVisibleLBCB;
              break;
          }
          for (var item in marks) {
            if (item.info.id.contains(type)) {
              item.setIsVisible(filterArr[index][1]);
            }
          }
        });
      },
      style: IconButton.styleFrom(
        backgroundColor:
            filterArr[index][1] ? Colors.greenAccent[400] : Colors.white,
        shadowColor: Colors.black,
        elevation: 3,
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Padding(
            padding: const EdgeInsets.only(
              right: 5,
            ),
            child: Icon(
              icon,
              color: filterArr[index][1] ? Colors.white : Colors.greenAccent,
            ),
          ),
          Text(
            title,
            style: Theme.of(context).textTheme.titleLarge?.copyWith(
                  fontSize: 10,
                  color: filterArr[index][1] ? Colors.white : Colors.black,
                ),
          )
        ],
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
    filterArr = [
      ['폐형광등, 폐건전지', isVisibleLBCB, CupertinoIcons.lightbulb, 'LBCB'],
    ];
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Stack(
      children: [
        NaverMap(
          options: _naverMapViewOptions,
          clusterOptions: NaverMapClusteringOptions(
            mergeStrategy: const NClusterMergeStrategy(
              willMergedScreenDistance: {
                NaverMapClusteringOptions.defaultClusteringZoomRange: 35,
              },
            ),
            clusterMarkerBuilder: (info, clusterMarker) {
              clusterMarker.setIsFlat(true);
            },
          ),
          onMapReady: (controller) async {
            _naverMapController = controller;

            // 클러스트 마커 추가
            final markers = buildClusterMarkers(mapSampleData, onMarkTap);
            marks.addAll(markers);
            await _naverMapController.addOverlayAll(markers);
          },
          onMapTapped: (point, latLng) {},
        ),
        SafeArea(
          child: SizedBox(
            height: 45,
            child: ListView(
              padding:
                  const EdgeInsets.symmetric(horizontal: 16.0, vertical: 2),
              scrollDirection: Axis.horizontal,
              children: List.generate(filterArr.length, (idx) {
                if (idx == filterArr.length - 1) {
                  return _fillterMenu(filterArr[idx][0], filterArr[idx][2],
                      filterArr[idx][3], idx);
                }
                return Padding(
                  padding: const EdgeInsets.only(
                    right: 10,
                  ),
                  child: _fillterMenu(filterArr[idx][0], filterArr[idx][2],
                      filterArr[idx][3], idx),
                );
              }),
            ),
          ),
        )
      ],
    );
  }
}