[flutter] flutter_svg에서 이미지 또는 아이콘 삽입 방법은?

08 Dec 2023

flutter

Flutter 앱에서 SVG 이미지를 표시하고 아이콘을 사용하려면 flutter_svg 패키지를 사용할 수 있습니다. 해당 패키지는 SVG 파일 및 스트링을 로드하여 Flutter 위젯으로 표시할 수 있습니다.

이번 게시물에서는 flutter_svg 패키지를 사용하여 이미지 및 아이콘을 삽입하는 방법에 대해 안내하겠습니다.

1. flutter_svg 패키지 설치

먼저, pubspec.yaml 파일에 아래와 같이 flutter_svg 패키지를 추가합니다:

dependencies:
  flutter_svg: ^0.22.0

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

2. SVG 이미지 표시하기

SVG 이미지를 표시하려면 SvgPicture 위젯을 사용합니다. 아래는 로컬 SVG 파일을 표시하는 예제 코드입니다:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/image.svg',
  semanticsLabel: 'An example SVG image',
  placeholderBuilder: (BuildContext context) => Container(
      padding: const EdgeInsets.all(30.0),
      child: const CircularProgressIndicator(),
  ),
)

또는 네트워크에서 SVG 이미지를 로드하는 경우:

SvgPicture.network(
  'https://example.com/image.svg',
  semanticsLabel: 'An example SVG image',
  placeholderBuilder: (BuildContext context) => Container(
      padding: const EdgeInsets.all(30.0),
      child: const CircularProgressIndicator(),
  ),
)

3. SVG 아이콘 사용하기

SVG 아이콘을 사용하려면 SvgPicture 위젯을 아이콘의 경로로 설정합니다. 예를 들어, Icons 클래스에 정의된 기본 내장 아이콘을 사용하려면 아래와 같이 작성할 수 있습니다:

SvgPicture.asset(
  'assets/icons/heart.svg',
  color: Colors.red,
  width: 24,
  height: 24,
)

위와 같이 SvgPicture 위젯을 사용하여 SVG 이미지와 아이콘을 표시할 수 있습니다.

더 자세한 내용은 flutter_svg 패키지 문서를 참고하시기 바랍니다.

이상으로 flutter_svg를 사용하여 이미지 및 아이콘을 삽입하는 방법에 대해 알아보았습니다. 부가적인 정보가 필요하다면, 언제든지 문의해주세요!

목차

1. flutter_svg 패키지 설치

2. SVG 이미지 표시하기

3. SVG 아이콘 사용하기