[flutter] flutter_svg에서 이미지 제스처 인식 방법은?

08 Dec 2023

flutter

flutter_svg는 Flutter 앱에서 SVG 이미지를 렌더링하는데 사용되는 훌륭한 패키지입니다. 그러나 이 패키지를 사용하여 SVG 이미지 위에 제스처를 인식하는 방법에 대해 궁금하신가요? 이를 위한 몇 가지 해결책이 있습니다.

GestureDetector 사용

가장 간단한 방법은 GestureDetector 위젯을 사용하는 것입니다. SVG 이미지를 GestureDetector 위젯으로 감싼 후, 해당 GestureDetector에서 원하는 제스처를 인식하도록 할 수 있습니다. 예를 들어, 다음과 같이 코드를 작성할 수 있습니다.

import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/material.dart';

class MySvgWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        // 여기에 탭 제스처를 처리하는 로직을 추가하세요.
      },
      child: SvgPicture.asset('assets/image.svg'),
    );
  }
}

svg.Rrect와 GestureDetector의 조합

SVG 이미지 내에 특정 부분에만 제스처 인식을 적용해야 하는 경우 svg.Rrect를 사용하여 원하는 부분을 감싼 후, 해당 영역에 GestureDetector를 추가할 수 있습니다. 예를 들어,

import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart' as svg;

class MySvgWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return svg.SvgPicture.asset(
      'assets/image.svg',
      pictureProvider: svgExactAssetPicture(SvgPicture.svgStringDecoder, 'assets/image.svg'),
      placeholderBuilder: (BuildContext context) => Container(
        padding: const EdgeInsets.all(30.0),
        child: const CircularProgressIndicator(),
      ),
    );
  }
}

위 코드는 flutter_svg 패키지를 사용하여 SVG 이미지를 로드하고, 특정 폴더 내의 이미지를 찾을 수 있는 방법을 보여줍니다.

위의 두 가지 방법 중 하나를 선택하여 이미지 위에 제스처를 쉽게 인식할 수 있을 것입니다.

더 자세한 내용은 Flutter SVG 공식 문서를 참조해 주세요.