[flutter] 플러터 앱에서 다양한 클리퍼 애니메이션 적용하기

05 Dec 2023

flutter

플러터는 Google에서 개발한 UI 프레임워크로서, 애플리케이션 개발을 위한 많은 기능과 라이브러리를 제공합니다. 클리퍼 애니메이션은 플러터에서 강력한 시각적 효과를 만들어내는데 도움을 주는 기능입니다. 이번 블로그에서는 플러터 앱에서 다양한 클리퍼 애니메이션을 적용하는 방법에 대해 알아보겠습니다.

1. 기본적인 클리퍼 애니메이션

다음은 기본적인 클리퍼 애니메이션을 적용하는 방법입니다:

ClipRRect(
  borderRadius: BorderRadius.circular(10.0),
  child: Image.asset('assets/images/image.jpg'),
)

위의 예시에서 ClipRRect 위젯은 사진을 감싸는 테두리의 모서리를 둥글게 만들어줍니다.

2. 다양한 클리퍼 애니메이션

2.1. 사각형 클리퍼 애니메이션

ClipRect(
  child: Align(
    alignment: Alignment.center,
    heightFactor: 0.5,
    widthFactor: 0.5,
    child: Image.asset('assets/images/image.jpg'),
  ),
)

2.2. 원형 클리퍼 애니메이션

ClipOval(
  child: Image.asset('assets/images/image.jpg'),
)

2.3. 웨이브 클리퍼 애니메이션

ClipPath(
  clipper: WaveClipper(),
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.moveTo(0, size.height / 2);
    path.quadraticBezierTo(
        size.width / 4, size.height, size.width / 2, size.height);
    path.quadraticBezierTo(
        size.width * 3 / 4, size.height, size.width, size.height / 2);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

위의 예시에서는 ClipPath 위젯을 사용하여 웨이브 형태의 클리퍼 애니메이션을 구현하였습니다.

결론

플러터는 다양한 클리퍼 애니메이션을 제공하여 앱에 시각적인 효과를 적용할 수 있습니다. 이번 블로그에서는 기본적인 클리퍼 애니메이션의 사용법과 사각형, 원형, 그리고 웨이브 형태의 클리퍼 애니메이션을 적용하는 방법을 알아보았습니다. 여러분은 이러한 클리퍼 애니메이션을 사용하여 플러터 앱에 멋진 시각적 효과를 적용해보세요.

더 자세한 내용은 플러터 공식 문서를 참고하시기 바랍니다.