Flutter - ImageFiltered, BackdropFilter, 이미지 흐림 효과 넣기

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 이미지를 수정하고 효과를 넣는 방법에 대해서 배워보겠습니다. 대표적으로 이미지 흐리기, 이미지 회전, 이미지 굴곡 효과 등에 대해서 배우겠습니다.

 

Flutter ImageFiltered

ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
  child: Image.asset("lib/flutter_img.png", fit: BoxFit.fill,),
)

이미지에 흐림 효과를 넣는 방법은 간단합니다. 흐림 효과를 줄 이미지는 ImageFiltered()로 묶고 imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10)을 설정해주시면 됩니다. 숫자는 원하시는 만큼 하실 수 있습니다. 

 

ImageFiltered()는 흐림 효과 이외에 다른 기능들도 있습니다. 대표적으로 

imageFilter: ImageFilter.matrix(
  Matrix4.rotationX(0.9).storage,
  // Matrix4.rotationY(0.3).storage,
  // Matrix4.rotationZ(0.3).storage,
),

같이 이미지는 꺽거나 돌리는 효과를 만들 수 있지만, 자세히 다루기에는 벡터나 여러 가지 설명할게 많아서 생략하도록 하겠습니다. 간단한 효과는 위 예시로도 가능하기 한 번 테스트해보시면 좋겠습니다. 

 

 

Flutter BackdropFilter

BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
  child: Image.asset("lib/flutter_img.png", fit: BoxFit.fill,),
)

위는 BackdropFilter 예시입니다. 혹시 실행해보셨나요? 흐림 효과가 이미지에 적용되었던가요? 네, 안됐을겁니다. BackdropFilter는 ImageFiltered처럼 child에만 흐림 효과를 적용하는 것이 아니라 기본 위젯 위에 효과를 적용하는 것입니다. 말로는 설명이 조금 어렵죠?

 

Stack(
  children: [
    Image.asset("lib/flutter_img.png", fit: BoxFit.fill,),
    // ImageFiltered(
    //   imageFilter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    //   child: Container(
    //     color: Colors.black.withOpacity(0),
    //   )
    // ),
    BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Container(
        color: Colors.black.withOpacity(0),
      )
    )
  ],
)

위의 예제를 복사하셔서 ImageFiltered와 BackdropFilter의 차이점을 이해해보시면 좋을것 같습니다. 그럼 둘을 나눈 이유가 무엇일까요??

 

간단합니다. 어떤 특정 위젯에 직접적으로 흐림 효과를 주려면 ImageFiltered, 간접적으로 효과를 주려면 BackdropFilter입니다. 그래서 BackdropFilter는 조금 더 활용이 많습니다.

 

Positioned(
  width: 200, height: 200, top: 100,	
  child: ClipRect(
    child: BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
      child: Container(
        color: Colors.black.withOpacity(0),
      )
    ),
  )
)

이런식으로 Positioned와 ClipRect를 이용하여 특정 부분만 흐림 효과를 준다거나 할 수 있습니다. 예를 들어 화면을 스크롤 하였을 때 Appbar에 흐림 효과를 주기에 좋겠죠?