Overview.
BackDropFilter 로 모자이크 처리를 해보자
- BackDropFilter 란
0. 문서
https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html
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),
),
),
),
),
],
),
),
);
}
}
'flutter & dart' 카테고리의 다른 글
flutter & dart - showModalBottomSheet (0) | 2024.04.01 |
---|---|
flutter & dart - BottomNavigationBar , IndexedStack 위젯 (0) | 2024.04.01 |
flutter & dart - Align 위젯 (0) | 2024.04.01 |
flutter & dart - hero animation (0) | 2024.04.01 |
flutter & dart - alert 창과 같은 Dialog (0) | 2024.04.01 |