[Flutter] Flutter에서 SVG 이미지 사용하기

 

SVG: Scalable Vector Graphics

 

 

는 앱개발에서 주로 사용되는 이미지 파일 형식입니다.

기존에 bitmap, jpg, png 파일에 비해 여러가지 장점을 가지고 있습니다. 특히나 파일 사이즈가 직고, 이미지 크기 조절시에 품질 저하가 발생하지 않는 점이 최고의 장점이라 할수 있습니다.

 

그럼, 이렇게나 좋은 SVG 이미지를 Flutter에서 어떻게 사용할 수 있는지 알아보겠습니다.

 

---

 

 

Flutter에서는 다행스럽게도 SVG 이미지의 사용을 도와주는 패키지(라이브러리)가 제공되고 있습니다.

 

1. pub.dev 사이트에서 "flutter_svg"를 검색하거나, 아래 링크를 클릭해주세요.

flutter_svg | Flutter Package

 

위의 이미지를 보시면, Like, PUB POINTS, POPULARITY 가 어마어마한 점수라는 것을 확인할수 있습니다.

그만큼 신뢰할수 있는 패키지라는 증거인거죠.

 

Installing 탭으로 이동하여 설치 방법을 알아봅니다.

음.. pubspec.yaml 파일에 한줄 추가만 해주면 되겠습니다.

 

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_svg: ^1.0.1

 

위의 코드와 같이 flutter_svg 를 추가합니다.

그리고, pub get 을 똭~!!

 

---

 

 

2. 이제 SVG 이미지 파일을 Flutter 프로젝트에 추가할 차례입니다.

인터넷에 무료 SVG 파일이나, 제플린 등으로 공유받은 파일을 PC에 다운로드 해놓습니다.

 

3. 프로젝트 root에 assets/icons/ 디렉토리를 생성합니다.

프로젝트 트리 맨 위에서 마우스 오른쪽 버튼 - NEW - Directory 를 눌러 생성합니다.

asssets 디렉토리를 만들고, assets 하위에 icons 디렉토리를 만들면 됩니다.

 

 

4. 다운로드 SVG 이미지 파일을 드레그&드랍으로 프로젝트의 assets/icons/ 디렉토리에 옮깁니다.

아래와 같이 팝업이 표시되면 Refactor 를 눌러줍니다.

 

 

5. 만약, Git을 사용하고 있다면, Git에 추가할지 여부를 묻는 팝업도 표시됩니다.

(저는 보통 Add 를 눌러줍니다. 나중에 수동으로 추가하셔도 됩니다.)

 

 

---

 

 

6. 생성된 assets/icons/ 디렉토리를 코드에서 사용할 수 있도록 pubspec.yaml 파일에 등록을 합니다.

기존에 주석처리된 샘플 예제를 삭제하시고, 아래와 같이 추가를 합니다.

 

# To add assets to your application, add an assets section, like this:
assets:
  - assets/icons/

 

6-1. 추가를 하고, 빌드를 했을때 아래와 같이 에러가 발생하는 경우가 있습니다.

이는 앞쪽 공백(들여쓰기)에 칸수에 문제가 있기 때문입니다.

맨앞에서 2칸, assets: 아래에서 2칸씩 들여쓰기가 되어야 합니다. 

(보통 주석해제만 하면 3칸이 되기때문에 1칸씩 삭제를 해주어야 합니다.)

 

 

---

 

 

7. 이제 코드를 구현할 차례입니다.

사용 방법은 아래 샘플 코드를 확인해주세요.

 

SvgPicture.asset(
  'assets/icons/ic_sloth.svg',
  width: 160,
  height: 160,
),

IconButton(
  onPressed: () {},
  icon: SvgPicture.asset(
    'assets/icons/ic_seal.svg',
    color: Colors.blueAccent,
  ),
  iconSize: 160,
)

 

위의 코드에서 SvgPicture 코드를 보시면 됩니다. 어렵지 않게 확인이 되시리라 생각이됩니다.

일반 이미지로 사용하는 경우엔, SvgPicture에서 이미지 사이즈 조절이되고, IconButton으로 사용시엔 IconButton widget에서 사이즈 조절이 가능합니다.

 

좀더 상세한 사용 방법은 pub.dev의 flutter_svg 패키지 상세페이지에도 확인이 가능힙니다.

 

---

 

 

전체 코드 소스는 아래 Github 링크를 확인해주세요.

GitHub - rcbuilders/FlutterSampleApp: flutter study sample project