[flutter] flutter_svg에서 이미지를 원하는 크기로 조절하는 방법은?

08 Dec 2023

flutter

flutter_svg는 Flutter 앱에서 SVG(Scalable Vector Graphics) 파일을 렌더링하기 위한 훌륭한 라이브러리입니다. 이미지를 효율적으로 처리하고, 크기를 조절하는 방법을 알아보겠습니다.

1. SVG 이미지 불러오기

먼저, flutter_svg를 사용하여 SVG 이미지를 불러옵니다.

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/example.svg',
  semanticsLabel: 'Example SVG',
),

2. 이미지 크기 조절

이미지의 크기를 조절하기 위해 width와 height 속성을 사용합니다.

SvgPicture.asset(
  'assets/example.svg',
  semanticsLabel: 'Example SVG',
  width: 200,  // 원하는 너비로 조절
  height: 200, // 원하는 높이로 조절
),

3. 다양한 크기와 프로퍼티 조절

fit 프로퍼티를 사용하여 이미지가 표시될 영역에 맞게 조절할 수 있습니다.
alignment 프로퍼티를 사용하여 이미지를 특정 위치에 맞게 정렬할 수 있습니다.

SvgPicture.asset(
  'assets/example.svg',
  semanticsLabel: 'Example SVG',
  width: 200,
  height: 200,
  fit: BoxFit.contain,
  alignment: Alignment.center,
)

이런식으로 flutter_svg를 사용하여 SVG 이미지의 크기를 조절할 수 있습니다. 원하는 크기와 속성을 적용하여 앱에 최적화된 이미지를 보여줄 수 있습니다.

더 자세한 정보는 flutter_svg 공식 문서를 참조하세요.