[flutter] flutter_svg에서 이미지 필터링 처리 방법은?

08 Dec 2023

flutter

flutter_svg를 사용하면 SVG 이미지를 쉽게 로드하고 표시할 수 있습니다. 때때로 SVG 이미지에 필터링 처리가 필요한데, 이를 어떻게 할 수 있는지 알아보겠습니다.

필터링 처리 방법

flutter_svg로 SVG 이미지를 로드할 때, ColorFilter.mode 메서드를 사용하여 필터링을 처리할 수 있습니다. 해당 메서드를 사용하면 원하는 색상을 SVG 이미지에 적용할 수 있습니다.

예를 들어, 이미지에 빨간색 필터를 적용하려면 다음과 같이 처리할 수 있습니다.

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: ColorFiltered(
            colorFilter: ColorFilter.mode(Colors.red, BlendMode.srcIn),
            child: SvgPicture.asset(
              'assets/example.svg',
              semanticsLabel: 'An example SVG image',
            ),
          ),
        ),
      ),
    );
  }
}

위의 예제에서 ColorFiltered 위젯을 사용하여 빨간색 필터를 적용하였습니다. ColorFilter.mode 메서드의 첫 번째 매개변수에는 적용할 색상을 지정하고, 두 번째 매개변수에는 BlendMode를 지정합니다.

이렇게하면 flutter_svg로 SVG 이미지에 필터링 처리를 쉽게 적용할 수 있습니다.

필터링 처리 방법

참고 자료