Flutter Svg Image 사용하기 (SvgPicture)

Flutter에서 Svg를 사용하는 법을 해보겠다

 

1. Package 사용하기

우선 플러터  아래의 링크로 간다

https://pub.dev/

Dart packages

그리고 검색창에 flutter_svg를 검색한다 

 

flutter_svg를 클릭한다

 

복사버튼을 클릭하도록 한다

 

2. pubspec.yaml에 붙여 넣기

pubspec.yaml 파일에 붙여 넣는다

위치는 dependencies > flutter > 안에다가 붙여 넣는다

※ ^2.0.0+1 가 안된다면 ^1.1.6로 바꿔주도록 하자. 필자는 ^1.1.6이다

 

반드시 Pug get을 눌러줘야 적용이 잘된다

 

2. 기본 코드

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/pages/practice_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const PracticePage(),
    );
  }
}

 

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

class PracticePage extends StatelessWidget {
  const PracticePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(),
      ),
    );
  }
}

 

3. svg파일 준비

아래의 링크에서

https://iconmonstr.com/heart-filled-svg/

Heart - iconmonstr

다운로드하고, 다운로드 한 svg파일을  assets폴더에 넣어줬다

 

4. SvgPicture.asset

이제 svg파일을 플러터 애뮬레이터에 보여주도록 할 것이다

practice_page.dart

child: SvgPicture.asset(
    "assets/iconmonstr-heart-filled.svg",
    height: 70,
    width: 70,
),

Container안에 위의 코드를 넣었다

그리고 SvgPicture가 자동 import가 안 되는 경우가 있다. 그럴 때는 맨 위에 아래의 코드를 넣어주도록 한다

import 'package:flutter_svg/flutter_svg.dart';

 

5. 결과

 

 

이렇게 flutter_svg 패키지를 이용해서 svg파일을 출력하는 것을 배웠다