[flutter] 플러터 svg파일 가져오는 방법

플러터에서 svg파일 가져와서 사용하는 방법을 알아보겠습니다.

 

 

▣ 플러터에서 svg파일 가져와서 사용하는 방법

1. 플러터 svg설치 파일 설치

pubspec.yaml파일에 아래 코드를 입력하고 상단의 Pub get버튼을 눌러 flutter_svg파일을 설치합니다.

flutter_svg: ^1.1.1+1

 

2. svg파일을 사용하기 위한 import

svg파일을 사용할. dart파일에 아래 코드를 import 합니다.

import 'package:flutter_svg/flutter_svg.dart';

 

3. svg파일 경로 설정

svg파일을 넣을 폴더를 생성한 후 svg파일을 넣습니다. 그리고 pubspec.yaml파일에 svg파일 경로를 등록합니다. 저는 svg폴더를 만들고 svg파일을 넣은 후 pubspec.yaml파일에 아래 코드를 통해 svg가 있는 폴더 경로를 지정했습니다. 아래와 같이 지정을 하면 svg폴더의 모든 svg 파일을 가져올 수 있습니다.

assets:
  - svg/

 

4. svg파일 사용하기

svg파일 사용하는 방법은 image 사용하는 방법과 동일합니다. 아래 코드와 같이 svg파일을 가져올 수 있습니다.

SvgPicture.asset('svg/sun.svg'),