[Flutter] SVG 파일 사용하기

기본 이미지와 다르게 svg 파일은 따로 패키지를 깔아줘야한다. 

 

🚀 패키지 설치

 

아래 명령어를 입력해준다. 

$flutter pub add flutter_svg
$flutter pub get

 

pubspec.yaml에서 잘 설치됐는지 확인가능!

 

🚀 이미지 사용하기

 

1. 사용할 이미지를 프로젝트 내 저장한다. 

 

내 경우 프로젝트 최상위치에 assets폴더를 만들고 그 안에 images라는 폴더를 만들어 사용하고 싶은 svg파일을 넣어주었다. 

 

 

 

 

 

 

 

2. pubspec.yaml 파일에서 assets을 추가한다. 

이미지가 저장된 위치를 assets에 아래와 같이 추가한다. 

 

3. 이미지를 사용할 페이지에서 아래와 같이 선언해준다. 

import 'package:flutter_svg/svg.dart';

Center(
    child: Container(
      width: 182,
      child: Align(
        alignment: Alignment.center,
        child: SvgPicture.asset(
          'assets/images/Beeginner.svg',
          width: 182,
        ),
      ),
    ),
  )

 

 

 

끝!!!