[flutter] flutter_svg에서 이미지 변형하기 위한 기능은?

08 Dec 2023

flutter

flutter_svg 라이브러리를 사용하면 SVG 이미지를 손쉽게 플러터 앱에 통합할 수 있습니다. 이 라이브러리는 이미지 변형을 위한 여러 가지 유용한 기능을 제공합니다.

이미지 변형 기능

1. 컬러 필터링

SVG 이미지에 컬러 필터를 적용하여 이미지의 색상을 조정할 수 있습니다. “colorFilter” 속성을 사용하여 이미지에 다양한 색상 효과를 적용할 수 있습니다.

예시:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/image.svg',
  colorFilter: ColorFilter.mode(Colors.green, BlendMode.multiply),
);

2. 이미지 크기 조정

SVG 이미지의 크기를 조절하여 화면에 맞게 표시할 수 있습니다. “width” 및 “height” 속성을 사용하여 이미지의 크기를 조정할 수 있습니다.

예시:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/image.svg',
  width: 200,
  height: 200,
);

3. 그림자 효과

SVG 이미지에 그림자 효과를 적용하여 입체적인 느낌을 줄 수 있습니다. “BoxShadow”를 사용하여 그림자 효과를 적용할 수 있습니다.

예시:

import 'package:flutter_svg/flutter_svg.dart';
import 'package:flutter/material.dart';

Container(
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(color: Colors.grey, blurRadius: 10),
    ],
  ),
  child: SvgPicture.asset(
    'assets/image.svg',
  ),
);

flutter_svg 라이브러리를 사용하여 다양한 이미지 변형 기능을 플러터 앱에 쉽게 적용할 수 있습니다.

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