플러터의 이미지 맵 같은 기능?

플러터의 이미지 맵 같은 기능?

꽤 많이 찾아봤는데 확실한 답을 찾지 못해서 이게 속임수라면 솔직히 시도해봤어요.

나는 HTML 기반 하이브리드 플랫폼( specif적으로 Trigger.io )에서 재작성 및 전환 중인 앱이 있다. 바로 Flutter and Dart에서 재작성을 수행한다.

앱의 일부는 사용자가 인체 이미지를 클릭할 수 있는 아주 간단한 화면을 포함하고 있으며, 이미지 맵을 통해 신체 부위(오른쪽 팔뚝, 왼쪽 무릎, 머리 등)에 대한 식별자와 캡션을 돌려받는다.

Flutter에서 이 동작과 기능에 대한 유사점을 찾을 수 없습니다. 내가 생각만 하다가 단순한 걸 놓친 건 아닐까?

대단히 감사합니다.

---

를 감싸서 탭된 좌표를 확인하고 그에 따라 동작하는 콜백을 지정할 수 있습니다.

전역 좌표를 로컬 좌표로 변환하려면 다음을 참조하십시오

다음은 대략적인 시도입니다:

class ImageMap extends StatelessWidget {
  const ImageMap({
    Key key,
    @required this.image,
    @required this.onTap,
    @required this.regions,
  }) : super(key: key);

  final Widget image;
  final List<Path> regions;

  /// Callback that will be invoked with the index of the tapped region.
  final void Function(int) onTap;

  void _onTap(BuildContext context, Offset globalPosition) {
    RenderObject renderBox = context.findRenderObject();
    if (renderBox is RenderBox) {
      final localPosition = renderBox.globalToLocal(globalPosition);
      for (var (index, path) in regions.indexed) {
        if (path.contains(localPosition)) {
          onTap(index);
          return;
        }
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) => _onTap(context, details.globalPosition),
      child: image,
    );
  }
}