[flutter] flutter_svg에서 이미지에 적용할 수 있는 필터 효과는?

08 Dec 2023

flutter

flutter_svg는 SVG 이미지를 flutter 앱에서 표시하는 데 사용되는 플러그인이다. 이 플러그인을 사용하여 SVG 이미지에는 다양한 필터 효과를 적용할 수 있다. 아래에서는 flutter_svg에서 이미지에 적용할 수 있는 주요 필터 효과에 대해 알아보겠다.

내용

흐릿함 효과
컬러 행렬 효과
컬러 알파 효과

흐릿함 효과

흐릿함 효과는 이미지를 부드럽게 만들어서 주변 픽셀의 평균값을 사용하여 이미지를 흐리게 만드는 효과이다. 이 효과는 BlurFilter를 사용하여 쉽게 적용할 수 있다.

예시:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/image.svg',
  colorBlendMode: BlendMode.modulate,
  color: Colors.blue,
  filterQuality: FilterQuality.high,
);

컬러 행렬 효과

컬러 행렬 효과는 이미지의 색상을 변환하는 효과이다. ColorFilter.mode를 사용하여 이미지에 컬러 행렬 효과를 쉽게 적용할 수 있다.

예시:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/image.svg',
  colorBlendMode: BlendMode.modulate,
  color: Colors.blue,
  colorFilter: ColorFilter.mode(
    Colors.green,
    BlendMode.hardLight,
  ),
);

컬러 알파 효과

컬러 알파 효과는 이미지의 투명도나 투명한 부분의 색을 변경하는 효과이다. ColorFilter.mode와 BlendMode를 사용하여 이미지에 컬러 알파 효과를 적용할 수 있다.

예시:

import 'package:flutter_svg/flutter_svg.dart';

SvgPicture.asset(
  'assets/image.svg',
  colorBlendMode: BlendMode.modulate,
  color: Colors.blue,
  colorFilter: ColorFilter.mode(
    Colors.transparent,
    BlendMode.dstATop,
  ),
);

이러한 필터 효과를 사용하여 flutter_svg로 이미지를 다양하게 표현할 수 있다.

더 자세한 내용은 flutter_svg 공식 문서를 참고하시기 바랍니다.