Flutter는 크로스 플랫폼 모바일 앱을 개발하기 위한 프레임워크로, 다양한 UI 요소를 제공합니다. 이미지를 로딩하고 표시하는 것은 앱 개발에서 핵심적인 부분 중 하나입니다. flutter_svg 패키지는 Scalable Vector Graphics (SVG) 이미지를 렌더링하기 위한 플러터 플러그인으로, 이미지의 다양한 크기에 대응할 수 있어 매우 유용합니다.

flutter_svg 패키지 설치

flutter_svg 패키지를 사용하려면, pubspec.yaml 파일에 다음과 같이 패키지를 추가해야 합니다:

dependencies:
  flutter_svg: ^0.22.0

이후 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치합니다.

이미지 로딩 및 캐싱

SVG 이미지를 로딩하고 캐싱하는 방법은 다음과 같습니다.

import 'package:flutter_svg/flutter_svg.dart';

// ...

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('SVG Image'),
    ),
    body: Center(
      child: SvgPicture.network(
        'https://example.com/image.svg',
        placeholderBuilder: (BuildContext context) => CircularProgressIndicator(),
        // 이미지가 로딩되는 동안 보여줄 위젯
        // 캐싱을 위한 key를 지정하려면 다음과 같이 cacheKey 속성을 사용합니다.
        // cacheKey: 'custom_cache_key',
      ),
    ),
  );
}

SvgPicture.network 위젯을 사용하여 SVG 이미지를 네트워크에서 로드하고, placeholderBuilder를 통해 이미지가 로딩되는 동안 보여줄 위젯을 설정할 수 있습니다. 또한, cacheKey를 사용하여 캐시를 수동으로 관리할 수 있습니다.

결론

Flutter 앱에서 flutter_svg 패키지를 사용하여 이미지를 로딩하고 캐싱하는 방법에 대해 알아보았습니다. 이를 통해 화면에 SVG 이미지를 효율적으로 표시할 수 있으며, 네트워크에서 이미지를 로드하는 동안 사용자에게 로딩 상태를 시각적으로 표시할 수도 있습니다.

참고 자료

• flutter_svg 패키지 문서
• Flutter 공식 문서