[flutter] flutter_svg에서 이미지를 확대 및 축소하는 방법은?

08 Dec 2023

flutter

flutter_svg라이브러리를 사용하면 Flutter 앱에서 SVG 이미지를 쉽게 표시할 수 있습니다. SVG 이미지를 확대 또는 축소하는 방법은 상당히 간단합니다.

1. flutter_svg 라이브러리 추가

먼저, pubspec.yaml 파일에 flutter_svg 라이브러리를 추가합니다.

dependencies:
  flutter_svg: ^0.22.0

그런 다음 터미널에서 아래 명령어를 실행하여 패키지를 업데이트합니다.

flutter pub get

2. SVG 이미지 표시 및 확대/축소

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

class MySvgImageWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SVG Image Demo'),
      ),
      body: Center(
        child: GestureDetector(
          onScaleUpdate: (ScaleUpdateDetails details) {
            // 확대 또는 축소 값 가져오기
            double newScale = details.scale;
            // 이미지 확대/축소
            // scale 값에 따라 이미지 크기를 조절합니다.
          },
          child: SvgPicture.asset(
            'assets/images/my_image.svg',
            height: 200, // 초기 높이
            width: 200, // 초기 너비
          ),
        ),
      ),
    );
  }
}

위의 예시 코드에서, SvgPicture.asset 위젯을 사용하여 SVG 이미지를 불러오고, GestureDetector 위젯을 사용하여 사용자의 확대/축소 동작을 감지합니다. onScaleUpdate 콜백을 사용하여 확대 및 축소 이벤트를 처리할 수 있습니다.

SVG 이미지를 확대 또는 축소하려면 onScaleUpdate 콜백에서 제공되는 ScaleUpdateDetails를 사용하여 새로운 스케일 값을 알아내고, 해당 값을 이용하여 이미지의 크기를 조절하면 됩니다.

이제, flutter_svg 라이브러리를 사용하여 SVG 이미지를 확대/축소하는 방법에 대해 알아보았습니다. 위의 예시 코드를 참고하여 자신만의 이미지 확대/축소 기능을 구현해 보시기 바랍니다.

더 많은 정보는 flutter_svg 공식 문서를 참고해 주세요.