[flutter] 플러터 BackdropFilter

 

 

참고: 🔗

 

겹쳐져 있는 배경에 효과를 주고 싶을 때! 인듯..

 

BackdropFilter 위젯에서는 ImageFilter와 child를 변수로 사용하고 필터를 child 아래 위젯에 적용합니다.

BackdropFilter(
    filter: ImageFilter.blur(
        sigmaX: 5,
        sigmaY: 5,
    ),
    child: // 여기만 필터가 적용된다고 하는데....
);

배경에 필터를 적용해서 그림이 보이지 않게 하려면 child에 빈 컨테이너를 사용하세요

BackdropFilter(
    filter: ImageFilter.blur(
        sigmaX: 5,
        sigmaY: 5,
    ),
    child: Container(
        color: Colors.black.withOpacity(0),
    )
);

그냥 filter가 위에 덮어 씌워진다고 생각하는 편이 빠를 듯..

 

❗❗❗❗❗❗❗❗❗❗❗❗❗1:24초❗❗❗❗❗❗❗❗❗❗❗❗❗

 

BackdropFilter를 사용하면 위젯 자체에 필터를 적용하는 대신 위젯 아래에 그려진 각각의 항목에 필터를 적용할 수 있음 → 그 레이어 밑에 있는 건 다 적용되는 것 같더라고...

Flutter에서는 ImageFiltered를 쓰는 것을 권장

ImageFiltered: 해당 위젯만 필터를 적용시켜준다.

ImageFiltered(
    imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
  child: Image.asset('images/pic1.jpg', width: 200),
)