지도에 그려진 마커 터치 시 터치한 마커 변경 된 이미지가 안보임

ehdwldk7400 commented 7 months ago

    marker.setOnTapListener((overlay) async {
      // 마커 클릭 시 이벤트 정의
      HapticFeedback.selectionClick();      

      overlay.setIcon(await NOverlayImage.fromWidget(
        widget: _getMarker(item, params.map, isApt: true),
        size: const Size(56.0, 60.0),
        context: context,
      ));
    });

_getMarker()에는 Stack() Widget을 Return 합니다.

마커 터치 시 해당 마커를 새로운 위젯으로 덮어씌우는데 지도를 옮겨야지만 표현됩니다. 이미지만 안보이고 다른건 다 괜찮은거 같아요. 처음만 이미지가 안보입니다.

note11g commented 7 months ago

@ehdwldk7400 안녕하세요, 재현을 위해, 사용중이신 패키지 버전 정보와 플러터 버전 정보를 부탁드립니다.

ehdwldk7400 commented 7 months ago

@ehdwldk7400 안녕하세요, 재현을 위해, 사용중이신 패키지 버전 정보와 플러터 버전 정보를 부탁드립니다.

Flutter 3.19.3 • channel stable • https://github.com/flutter/flutter.git Framework • revision ba39319843 (5 weeks ago) • 2024-03-07 15:22:21 -0600 Engine • revision 2e4ba9c6fb Tools • Dart 3.3.1 • DevTools 2.31.1

flutter_naver_map: ^1.2.2 사용중입니다. 아이콘 이미지는 Image.asset()으로 사용 중 입니다.

note11g commented 7 months ago

@ehdwldk7400 앱을 실행하는 환경의 정보도 부탁드립니다.

ehdwldk7400 commented 7 months ago

@ehdwldk7400 앱을 실행하는 환경의 정보도 부탁드립니다.

테스트하는 기기 말씀하시는거면 Galaxy S22(SM-S901N) 안드로이드 14, IPHONE 11(IOS 17.4.1)입니다. 현재 두 기기 전부 똑같은 현상입니다.

note11g commented 7 months ago

https://github.com/note11g/flutter_naver_map/issues/195 해당 이슈의 동영상과 비슷한 이슈일까요?

가능하시다면 이슈가 되는 화면을 녹화하시어 업로드 부탁드려도 괜찮을까요?

ehdwldk7400 commented 7 months ago

195 해당 이슈의 동영상과 비슷한 이슈일까요?

가능하시다면 이슈가 되는 화면을 녹화하시어 업로드 부탁드려도 괜찮을까요?

혹시 동영상을 따로 첨부 해드릴 이메일이나 카카오톡 같은 메신져 괜찮으실까요??

note11g commented 7 months ago

재현에 실패하였습니다. 확인 부탁드립니다. @ehdwldk7400

(+추가합니다. ~~아마도 HapticFeedback.selectionClick(); 때문인 것으로 추정됩니다.~~ 그리고 최대한 async 코드를 피해주시는 것도 하나의 방법이 될 것 같습니다. => 위젯 사용 이미지 객체 미리 생성 등. 또한 이미지로 변환할 위젯은 stateless여야 최대한 sideEffect를 피할 수 있음도 참고하시기 바랍니다)

재현에 사용한 코드 (version: `flutter_naver_map 1.2.2` / `flutter 3.19.5`)

const defaultCaption = NOverlayCaption(text: "default icon");
final marker = NMarker(
    id: "1",
    position: controller.nowCameraPosition.target,
    caption: defaultCaption)..setOnTapListener((marker) {
        if (marker.caption?.text == "default icon") {
          NOverlayImage.fromWidget(
                  widget: const FlutterLogo(),
                  size: const Size(24, 24),
                  context: context)
              .then((icon) => marker
                ..setIcon(icon)
                ..setCaption(const NOverlayCaption(text: "flutter logo")));
        } else {
          marker
            ..setIcon(null)
            ..setCaption(defaultCaption);
        }
  });
await controller.addOverlay(marker);

재현 영상

Android (Galaxy S23 Ultra, Android 14.0)	iOS (iPhone 12 mini, iOS 17.3)

ehdwldk7400 commented 7 months ago

재현에 실패하였습니다. 확인 부탁드립니다. @ehdwldk7400

(+추가합니다. ~아마도 HapticFeedback.selectionClick(); 때문인 것으로 추정됩니다.~ 그리고 최대한 async 코드를 피해주시는 것도 하나의 방법이 될 것 같습니다. => 위젯 사용 이미지 객체 미리 생성 등. 또한 이미지로 변환할 위젯은 stateless여야 최대한 sideEffect를 피할 수 있음도 참고하시기 바랍니다)

재현에 사용한 코드 (version: flutter_naver_map 1.2.2 / flutter 3.19.5)
const defaultCaption = NOverlayCaption(text: "default icon");
final marker = NMarker(
    id: "1",
    position: controller.nowCameraPosition.target,
    caption: defaultCaption)..setOnTapListener((marker) {
        if (marker.caption?.text == "default icon") {
          NOverlayImage.fromWidget(
                  widget: const FlutterLogo(),
                  size: const Size(24, 24),
                  context: context)
              .then((icon) => marker
                ..setIcon(icon)
                ..setCaption(const NOverlayCaption(text: "flutter logo")));
        } else {
          marker
            ..setIcon(null)
            ..setCaption(defaultCaption);
        }
  });
await controller.addOverlay(marker);
재현 영상

Android (Galaxy S23 Ultra, Android 14.0) iOS (iPhone 12 mini, iOS 17.3) Screen_Recording_20240415_151446.mp4 RPReplay_Final1713161197.MP4

FlutterLogo()로 교체하면 정상작동하는 것으로 확인됩니다. Image.asset()으로 사용하면 문의드린 현상이 나타나는것으로 보입니다. code

note11g commented 7 months ago

https://github.com/note11g/flutter_naver_map/blob/16847fc54c3032e68e2a81a991e145b223a18f45/lib/src/type/map/overlay/overlay_image.dart#L36-L52

위 구현에서도 알 수 있듯, NOverlayImage.fromWidget에서 인자로 전달되는 위젯에 Image 위젯을 사용하는 것은 허용되지 않습니다. 이유는 성능 최적화 불가와 로드 타이밍이 늦춰질 수 있기 때문입니다. (위젯이 그려지는 시점에 이미지의 로드가 완료되지 않음. 정말 크리티컬하게 필요한 경우에만 이미지를 pre-load하여 사용.)

마찬가지 이유로 동적으로 작동하는 Stateful 위젯 역시 사용을 권장하지는 않습니다. fromWidget 팩토리 생성자는 위젯을 이미지로 변경하여 사용하는 것이므로 동적으로 변경되었을 때의 의도를 제대로 캡쳐하지 못하기 때문입니다.

대신, 지도에서 이미지를 사용하시려면 NOverlayImage.fromAssetImage or .fromFile or .fromByteArray 같은 생성자들을 사용하시면 됩니다.

또한, Text 정보가 필요하신 경우에는 caption이나, subCaption을 적절히 배치하는 것도 고려해보실 수 있습니다. 감사합니다.

note11g commented 7 months ago

더 질문이 있으시다면 코멘트를 남겨주시고, 문제가 해결되셨다면, 이 이슈를 닫아주세요. 감사합니다, 좋은 하루 되세요:)

note11g commented 7 months ago

답변이 이루어진지 시간이 꽤 지났기에, 해당 이슈는 닫겠습니다. 만약 추가 질문이 있으시거나, 문제 해결에 어려움을 겪고 계시다면 다시 이 이슈를 열고, 코멘트를 남겨주세요. 감사합니다. 좋은 하루 되세요!

yoojin282 commented 6 months ago

답변감사합니다. 위 내용참고하여 일단 precacheImage 로 처리했습니다.

note11g / flutter_naver_map