[flutter] 앱 아이콘을 SVG 파일로 생성하는 방법

22 Dec 2023

flutter

앱 개발 시 아이콘을 생성할 때 SVG 파일을 사용하면 크기를 자유롭게 조절할 수 있으며 고해상도 디스플레이에 대응하기 용이합니다. 이 글에서는 Flutter 앱에서 SVG 파일을 사용하여 아이콘을 생성하는 방법에 대해 알아보겠습니다.

SVG 파일 사용하기

SVG 파일은 확장 가능한 벡터 그래픽 파일로, 확장자가 .svg인 파일입니다. Flutter에서 SVG를 사용하려면 flutter_svg 패키지를 프로젝트에 추가해야 합니다.

dependencies:
  flutter_svg: ^0.22.0

SVG 이미지 파일을 추가한 후 아이콘을 표시할 위젯에 SvgPicture.asset 또는 SvgPicture.network 위젯을 사용하여 SVG 이미지를 로드할 수 있습니다.

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/icons/example.svg',
  semanticsLabel: 'Example icon',
  width: 24,
  height: 24,
),

앱 아이콘 생성하기

Flutter Rive의 아이콘 에디터를 사용하여 SVG 아이콘을 디자인합니다.
‘Export’ 버튼을 클릭하여 SVG 파일로 내보냅니다.
프로젝트의 pubspec.yaml 파일에 SVG 파일 경로를 추가합니다.
SVG 이미지를 표시할 위젯에 SvgPicture.asset 위젯을 사용하여 아이콘을 화면에 표시합니다.

SvgPicture.asset(
  'assets/icons/custom_icon.svg',
  semanticsLabel: 'Custom Icon',
  width: 48,
  height: 48,
),

앱 개발 중에 SVG 파일을 사용하여 화려하고 고해상도의 아이콘을 생성해보세요. SVG 파일을 조정하거나 변경할 필요가 있을 때 훨씬 간단해질 것입니다!