[flutter] 벡터이미지(SVG) 파일 다루기 (flutter v.1.22)

앱의 디자인을 입히는 과정에서, 벡터 파일을 가져와서 앱에 입혀야하는 경우가 있다.

피그마 같은 툴로 디자이너와 협업 하는 경우 아이콘들을 벡터 기반의 파일로 공유 받곤 한다.
벡터로 이미지를 사용 할 경우 re-size 했을 때 깨짐 없이 다양한 해상도에서 자유롭게 쓸 수 있다는 장점이 있어서 앱 개발 했을 때 많이 사용한다.

오늘은, flutter 에서 핵핵 좋은 벡터 파일들을 한번 사용해보자!
(진짜 핵간단하다!!@!@)

https://pub.dev/packages/flutter_svg

flutter_svg | Flutter Package

---

 

1. dependency 추가

플러터에서 벡터 파일을 읽어오기 위해서는 flutter_svg 플러그인을 추가해줘야한다.

- pubspec.yaml

# flutter v. 1.22 기준 
dependencies:
  flutter_svg: ^0.19.0

이렇게 초간단하게 설치를 마쳤으면, 이미지를 프로젝트에 추가해주자!

2. 벡터 이미지 가져오기

대게, 아이콘과 같은 이미지 파일들은 {프로젝트 루트}/assets 경로에 저장한다.

나의 경우, 아이콘만 담을 파일을 하나 더 만들어서 다음과 같이 해주었다.

 

그러고 나서, 이미지 파일이 있는 폴더를 클릭 > 우클릭 > Copy > Path From Content Root 를 선택하여,
디렉토리 패스를 저장해준다. (나같은 경우 귀찮아서 이렇게 했는데, 타이핑이 편하신 분은 그냥 타자치면 된다!)

 

저장~~ 했으면 다시 pubspec.yaml 파일로 돌아가 이렇게 추가해주자! 

# pubspec.yaml

 assets:
    - assets/
    - assets/icons/

맨 밑에 쭉~ 내려보면 assets 이라고 된 부분이 있을 것이다. 여기서 잡는 패스는 루트(lib) 기준으로 되어 있으니, 금방 추가한 assets 파일들의 패스를 입력해주자.

이제 다 했다..
피날레 느낌으로 flutter pub get  한번 해주자..

3. 벡터 이미지(.svg) 위젯에 사용하기

아이콘을 넣을 곳에 잘 맞춰서 입력해주면 끝!.... (너무 간단..... ㅠ)
아 참고로 SvgPicture.asset은 Widget 형태로 반환된다. 

IconButton(
  icon: SvgPicture.asset("assets/icons/notification.svg"),
  onPressed: () {
  Navigator.pushNamed(context, 'notice_page');
  }
)

나의 경우, IconButton 위젯에 Svg 파일의 아이콘을 사용했다.
이 외에도 network, file, memory 등 다양한 위치에 있는 경우, 가져오는 방법을 알려주니 한번 확인해보길 바란다!

+)
아.. 이거 가끔 플러그인이랑 에셋 추가해주고 flutter pub get 했는데도 불구하고 path를 못 잡는다.
그럴 때 당황하지 않고 flutter clean 해주고 열심히 pub get 하면 되는데, 올라가는 파일들이 많고 해서 그런 듯 하다 (추측)

그리고 경험상 flutter v.1.22에서 1.18.0 버전 미만을 사용 하고자 했을 때
flutter pub get 까진 잘 됐지만, 빌드 하는 과정에서  다음과 같은 에러를 뱉으면서 안 됐다. (iOS로 빌드 했고, 안드는 잘 모르겠다.)

./../flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.17.4/lib/src/picture_stream.dart:171:30: Error: The method 'toStringShort' isn't defined for the class 'PictureStreamCompleter'.
     - 'PictureStreamCompleter' is from 'package:flutter_svg/src/picture_stream.dart' ('../../flutter/sdk/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_svg-0.17.4/lib/src/picture_stream.dart').
    Try correcting the name to the name of an existing method, or defining a method named 'toStringShort'.

플러그인 내 메소드가 뭐 중복?이 되어서 뱉는 오류 같은데... 역시 플러그인은 최신의 것을 사용 해야겠다...

-e
참고

https://flutter.dev/docs/development/ui/assets-and-images