[flutter] flutter_svg에서 이미지에 클릭 이벤트를 추가하는 방법은?

08 Dec 2023

flutter

flutter_svg는 Flutter 앱에서 SVG 이미지를 렌더링하기 위한 훌륭한 라이브러리입니다. 만약 SVG 이미지를 터치할 때 특정 작업을 수행하고 싶다면, 아래 방법을 사용할 수 있습니다.

OnTap 기능 사용

flutter_svg의 SvgPicture 위젯은 InkWell 위젯을 감싸는 방식으로 이미지에 터치 이벤트를 추가할 수 있습니다. 아래는 간단한 예시 코드입니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: GestureDetector(
            onTap: (){
              // 터치 시 실행할 작업을 여기에 추가
            },
            child:  SvgPicture.asset(
              'assets/image.svg', // 이미지 경로
              semanticsLabel: 'A flutter logo', // 이미지 설명
            ),
          ),
        ),
      ),
    );
  }
}

위 예시 코드에서는 SvgPicture 위젯을 GestureDetector와 함께 사용하여 이미지에 접근성을 추가하고, 터치 이벤트를 처리할 수 있습니다. onTap 콜백 내에서 원하는 작업을 수행할 수 있습니다.

이제 앱에서 SVG 이미지에 터치 이벤트를 쉽게 추가할 수 있게 되었습니다.
더 자세한 내용은 flutter_svg 공식 문서를 참고하십시오.