flutter & dart - 블러 처리(모자이크)를 해보자 BackdropFilter

Overview.

BackDropFilter 로 모자이크 처리를 해보자

1. BackDropFilter 란

 

0. 문서

https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html

BackdropFilter class - widgets library - Dart API

 

 

1. BackdropFilter

기존에 그려진 콘텐츠에 필터를 적용한 다음 자식을 그리는 위젯입니다 .

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

필터 결과는 blendMode 매개변수를 사용하여 배경에 다시 혼합됩니다. 모든 플랫폼에서 지원되는 blendMode 의 유일한 값은 대부분의 장면에서 잘 작동하는 BlendMode.srcOver 입니다. 그러나 불투명도 위젯 처럼 BackgroundFilter 의 부모가 임시 버퍼나 저장 레이어를 사용하는 경우 해당 값은 놀라운 결과를 생성할 수 있습니다 . 이러한 상황에서는 BlendMode.src 값을 사용 하면 더 만족스러운 결과를 얻을 수 있지만 일부 플랫폼(특히 웹 애플리케이션용 html 렌더러)과의 비호환성을 희생해야 합니다. 

 

... 라고 합니다.

 

거의 공식인데 Positioned 로 위치를 잡고 ClipRRect 로 해당 크기만큼만 블러 처리가 가능합니다.

ClipRRect 는 자식 위젯만큼 크기를 제한하기 때문이죠

나쁜 악당 고양이가 되었다.

class _Home extends StatelessWidget {
  const _Home({super.key});

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          children: [
            Image.asset(
              "assets/image.jpg",
              height: double.infinity,
              width: double.infinity,
              fit: BoxFit.fill,
            ),
            // Positioned 로 위치를 지정
            // ClipRRect 를 상위 위젯으로 하면 BackdropFilter를 잘라서
            // height : 400 , width : 500 만큼만 적용 하도록 할 수 있다.
            // ClipRRect 는 자식의 크기만큼 자르게 된다.
            Positioned(
              left: 130,
              right: 100,
              top: 345,
              child: ClipRRect(
                child: BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 10,
                    sigmaY: 10,
                  ),
                  child: Container(
                    height: 20,
                    color: Colors.black.withOpacity(0.5),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}