Flutter에서 Flutter SVG 패키지 사용법과 옵션

lutter는 다양한 그래픽 작업을 지원하며, 그 중 SVG(Scalable Vector Graphics)를 사용하여 고해상도와 확대/축소에 유리한 벡터 이미지를 활용할 수 있습니다.

이번 포스트에서는 Flutter SVG 패키지의 사용법과 주요 옵션에 대해 알아보겠습니다.

Flutter SVG 패키지 소개

Flutter SVG 패키지는 SVG 형식의 이미지를 Flutter 애플리케이션에 쉽게 통합할 수 있게 해주는 라이브러리입니다.

이 패키지를 사용하면 복잡한 벡터 그래픽을 간단하게 앱에 추가할 수 있습니다.

1. 패키지 설치

먼저, pubspec.yaml 파일에 flutter_svg 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^1.0.0

그런 다음, 터미널에서 pub get 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

2. SVG 이미지 로드 및 표시

SVG 이미지를 로드하고 표시하려면 SvgPicture 위젯을 사용합니다.

로컬 파일에서 SVG 이미지 로드

로컬 파일에서 SVG 이미지를 로드하려면 이미지 파일을 assets 폴더에 추가하고, pubspec.yaml 파일에 경로를 지정합니다.

flutter:
  assets:
    - assets/images/example.svg

이제 SvgPicture.asset 메서드를 사용하여 이미지를 로드할 수 있습니다.

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

class SvgExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SVG Example'),
      ),
      body: Center(
        child: SvgPicture.asset(
          'assets/images/example.svg',
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

네트워크에서 SVG 이미지 로드

네트워크에서 SVG 이미지를 로드하려면 SvgPicture.network 메서드를 사용합니다.

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

class SvgNetworkExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('SVG Network Example'),
      ),
      body: Center(
        child: SvgPicture.network(
          'https://example.com/example.svg',
          width: 200,
          height: 200,
        ),
      ),
    );
  }
}

3. 주요 옵션

Flutter SVG 패키지는 다양한 옵션을 제공하여 SVG 이미지를 커스터마이징할 수 있습니다.

색상 변경

SVG 이미지의 색상을 변경하려면 color 속성을 사용합니다.

SvgPicture.asset(
  'assets/images/example.svg',
  width: 200,
  height: 200,
  color: Colors.red,
)

맞춤 모드(Fit) 설정

SVG 이미지를 다양한 맞춤 모드로 표시할 수 있습니다. fit 속성을 사용하여 이를 설정할 수 있습니다.

SvgPicture.asset(
  'assets/images/example.svg',
  width: 200,
  height: 200,
  fit: BoxFit.contain,
)

사용할 수 있는 BoxFit 옵션은 다음과 같습니다:

• BoxFit.fill: 이미지가 위젯의 전체 영역을 채우도록 조정됩니다.
• BoxFit.contain: 이미지가 위젯의 크기에 맞춰 비율을 유지하며 조정됩니다.
• BoxFit.cover: 이미지가 위젯의 크기에 맞춰 잘리면서 채워집니다.
• BoxFit.fitWidth: 이미지의 너비가 위젯의 너비에 맞춰 조정됩니다.
• BoxFit.fitHeight: 이미지의 높이가 위젯의 높이에 맞춰 조정됩니다.
• BoxFit.none: 이미지가 조정되지 않습니다.

Placeholder 설정

SVG 이미지를 로드하는 동안 플레이스홀더를 표시할 수 있습니다.

SvgPicture.network(
  'https://example.com/example.svg',
  width: 200,
  height: 200,
  placeholderBuilder: (BuildContext context) => CircularProgressIndicator(),
)

Semantics 설정

SVG 이미지에 대한 접근성을 설정할 수 있습니다. semanticsLabel 속성을 사용하여 설명을 추가합니다.

SvgPicture.asset(
  'assets/images/example.svg',
  semanticsLabel: 'Example SVG Image',
)

결론

Flutter SVG 패키지를 사용하면 SVG 이미지를 쉽게 로드하고 표시할 수 있습니다.

다양한 옵션을 활용하여 이미지의 색상, 크기, 맞춤 모드 등을 설정할 수 있으며, 플레이스홀더와 접근성 설정도 가능합니다.

이를 통해 더욱 다양한 그래픽 요소를 Flutter 애플리케이션에 통합할 수 있습니다.

 

 

 

 

Tester Share [테스터쉐어] - Google Play 앱

 

나비일기장 [수발일기장] - Google Play 앱