이번 포스트에서는 Flutter 앱에서 flutter_svg 패키지를 사용하여 이미지를 스크롤하고 줌하는 방법에 대해 알아보겠습니다.

flutter_svg란?

flutter_svg는 Flutter 앱에서 SVG 이미지를 렌더링하는 데 사용되는 패키지입니다. SVG는 XML 기반의 벡터 이미지 형식으로, 고해상도의 이미지를 확대 또는 축소할 때 깨지지 않고 선명하게 표시됩니다.

이미지 스크롤 및 줌 처리하기

먼저, flutter_svg 패키지를 프로젝트에 추가합니다.

dependencies:
  flutter_svg: ^0.22.0

SVG 이미지를 스크롤하고 줌하기 위해 flutter의 InteractiveViewer 위젯을 사용할 수 있습니다. InteractiveViewer를 통해 이미지를 스크롤하고 확대 또는 축소할 수 있습니다.

아래는 flutter_svg와 InteractiveViewer를 사용하여 SVG 이미지를 스크롤하고 줌하는 간단한 예제 코드입니다.

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

class SvgScrollZoomScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SVG Scroll and Zoom'),
      ),
      body: Center(
        child: InteractiveViewer(
          boundaryMargin: EdgeInsets.all(20.0),
          minScale: 0.1,
          maxScale: 3.0,
          child: SvgPicture.asset(
            'assets/image.svg',
          ),
        ),
      ),
    );
  }
}

위 코드에서, InteractiveViewer의 child 속성에 SvgPicture.asset 위젯을 사용하여 SVG 이미지를 불러옵니다. boundaryMargin을 사용하여 이미지 주변의 여백을 설정하고, minScale과 maxScale을 사용하여 이미지의 최소 및 최대 확대/축소 값을 지정할 수 있습니다.

마무리

이제 flutter_svg 패키지와 InteractiveViewer를 사용하여 Flutter 앱에서 SVG 이미지를 스크롤하고 줌하는 방법에 대해 알아보았습니다.

더 많은 customization을 위해서는 flutter_svg 공식 문서를 참고하시기 바랍니다.

Happy coding! 🚀