#Flutter. SVG(벡터이미지) URL, flutter에서 사용하기.

앞서 개인 프로젝트를 진행하다 알게 된건데 우리가 flutter에서 이미지를 사용하기 위해선

Image.network("이미지 url"),

이런 문법을 사용했습니다. 

그런데.. Flutter는 SVG를 읽지 못한다고 합니다..

이를 읽기 위해선 라이브러리를 설치해 주어야하죠..

 

https://pub.dev/packages/flutter_svg/install

flutter_svg | Flutter Package

 

설치는 다음과 같이 직접 터미널에 입력하거나 pubspec.yarn 파일에 추가해주면 됩니다.

 

그럼 svg를 사용할땐 어떻게 할까요?

방법은 쉽습니다.

import 'package:flutter_svg/flutter_svg.dart';

						...

SvgPicture.network("SVG URL 입력"),

기존 Image 대신 SvgPicture을 사용하면 SVG URL을 사용할 수 있습니다. 대신 사용을 위해선 꼭 flutter_svg 라이브러리를 import 해주어야 합니다!!

 

tmi...

음 저같은 경우, 제가 API로 받아오던 EPL팀 엠블럼을 보니 png와 svg가 섞여 있더라고요? 보통 한가지 방식으로 통일 할텐데 좀 당황했습니다..

 

그래서 

이렇게 삼항연산자를 사용했습니다. 만약 URL에 마지막이 .svg로 이루어졌다면 SvgPicture를 사용하고 아니라면 기존과 같이 Image를 사용하여 svg와 png 모두 불러올 수 있었습니다.

 

다들 읽어주셔서 감사합니다!