Flutter[플러터] / BackdropFilter 를 사용하여 배경에 블러 효과 주기 (모자이크 처리, 백드랍필터, blur) BackdropFilter (Flutter Widget of the Week)

BackdropFilter class

기존의 페인트 된 콘텐츠에 필터를 적용한 다음 자식을 페인트하는 위젯입니다.

필터는 부모 위젯 또는 상위 위젯의 클립 내 모든 영역에 적용됩니다. 클립이 없는 경우 필터는 전체 화면에 적용됩니다.

필터 결과는 blendMode 매개변수를 사용하여 배경에 다시 블렌딩 됩니다.모든 플랫폼에서 지원되는 blendMode 의 유일한 값은 BlendMode.srcOver 이며, 대부분의 장면에서 잘 작동합니다. 하지만 BackdropFilter 의 부모가 Opacity 위젯 처럼 임시 버퍼나 저장 레이어를 사용하는 경, 이 값은 예상치 못한 결과를 초래할 수 있습니다. 이 경우 BlendMode.src 값을 사용하면 더욱 만족스러운 결과를 얻을 수 있습니다.

여러 개의 배경 필터 위젯이 공통 BackdropKey를 공유하는 경우, Flutter 엔진은 여러 배경 필터를 단일 렌더링 작업으로 결합할 수 있습니다. 배경 필터 키는 배경 필터의 입력을 고유하게 식별하며, 공유될 경우 필터링을 한 번만 수행할 수 있음을 나타냅니다. 이를 통해 한 장면에서 여러 배경 필터를 사용할 때 발생하는 오버헤드를 크게 줄일 수 있습니다. 이 키는 생성자 매개변수를 통해 수동으로 제공하거나, 생성자를 통해 BackdropGroup 상속 위젯 backdropKey 에서 찾을 수 있습니다

서로 겹치는 배경 필터는 동일한 배경 키를 사용해서는 안 됩니다. 그렇지 않으면 겹치는 영역에 하나의 필터만 적용된 것처럼 결과가 나타날 수 있습니다.

https://youtu.be/dYRs7Q1vfYI

공식 문서 코드

 

---

BackdropFilter 위젯은 자식 위젯을 렌더링 하기 전에 그 배경에 필터를 적용하는 데 사용된다.

바로 위젯한테 블러를 주고 싶다면 ImageFilter 를 사용해서 바로 주면 된다. 이 BackdropFilter 위젯은 어디까지나 '배경'에 필터를 적용해 주는 위젯이다. 바로 한번 알아보자.

하위 속성

속성명	타입	기본값	설명
child	Widget	–	필터가 적용될 자식 위젯
filter	ImageFilter	–	배경에 적용할 이미지 필터 (예: 블러)
blendMode	BlendMode	BlendMode.srcOver	필터 처리된 배경을 어떻게 합성할지 결정
enabled	bool	true	필터 적용 여부 (false이면 필터 미적용)
backdropGroupKey	BackdropKey?	null	필터가 적용될 백드롭 그룹을 명시적으로 지정할 때 사용

 

그렇다면 이걸 어떻게 사용하나? 영상에 나온 것처럼 스택을 사용해도 되고 그냥 자식으로 넣어도 되지만 스택으로 만드는 걸 보여주겠다. 방법은 아주 간단하다. Stack 을 만들고 평소에 스택 배치 하듯이 배치해주면 된다.

근데 이제 BackdropFilter 를 곁들여 주면 되는 것인데 그냥 filter 에 자신이 주고 싶은 블러 효과를 주면 된다. ImageFilter.blur 이렇게 하면 손쉽게 효과를 줄 수 있다.

filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),

 

이렇게 하면 배경에 적용될 효과는 끝이 났다. 이제 영상에 나온 대로 그 자식은 투명한 컨테이너를 자식으로 삼아 준다. 이러면 실체가 완성되어서 화면에 표시 되게 된다. 색 바꾸고 싶으면 바꿔도 된다.

Stack(
  children: [
    Image.asset('assets/faker.jpeg'), // 배경 이미지
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5), // 블러 필터
      child: Container(
        color: Colors.transparent, // 투명 컨테이너 (필터 적용 용도)
      ),
    ),
    Center(
      child: Text(
        'Blurred Background',
        style: TextStyle(fontSize: 24, color: Colors.white),
      ),
    ),
  ],
)

이런 식으로 자연스럽게 배경에 블러 효과가 들어가게 된다. 정말 간단하지 않은가?

다른 예제도 봐보자.

Stack(
  children: <Widget>[
    Positioned.fill(child: Image.asset('faker.jpeg')),
    Positioned.fill(
      child: BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
        child: Container(color: Colors.transparent,),
      ),
    ),
  ],
);

이 예제는 BackdropFilter 로 단일 형제 위젯에 적용하는 일반적인 경우를 ImageFiltered 위젯으로 대체하는 방법을 보여주고 있다. 앞서 말했듯이, 그리고 공식 문서에서도 나와 있듯이 그냥 이럴 거면 ImageFilter 쓰는 게 53만 배 더 빠르다.

 

근데 여기서 주의할 점은 필터는 GPU를 사용하는 작업이므로 퍼포먼스에 영향을 줄 수 있다는 것이다. 좀 버그성인 것 같기도 한데 안 고치는 거 보니까 버그는 아닌 것 같다. 그래서 이거 되게 신중하게 사용 안 하면 사용한 앱에 무리가 갈 수도 있는 것이다.

 

솔직히 나는 그냥 피그마에 블러처리한 이미지 Export 해서 사용할 것 같다. 암튼 도움이 되었길 바라며 마치겠다.