[flutter] 클리퍼를 이용한 플러터 앱 배경 애니메이션 구현 방법

05 Dec 2023

flutter

안녕하세요! 이번에는 Flutter를 사용하여 앱 배경에 애니메이션을 구현하는 방법에 대해 알아보겠습니다. 이를 위해 클리퍼(clipper)를 사용할 것입니다.

1. 클리퍼란?

클리퍼는 플러터에서 도형을 잘라내는 역할을 합니다. 이를 통해 원하는 모양의 배경을 만들고, 애니메이션 효과를 적용할 수 있습니다.

2. 클리퍼를 이용한 앱 배경 애니메이션 구현 방법

2.1 클리퍼 클래스 만들기

먼저, 클리퍼를 사용하기 위해 CustomClipper 클래스를 상속하는 클래스를 만들어야 합니다. 이 클래스를 통해 원하는 형태의 클리퍼를 만들고, 애니메이션을 적용할 수 있습니다.

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // 클리퍼의 형태를 정의하는 부분입니다.
    // 예를 들어, 원 모양의 클리퍼를 만들고 싶다면 아래와 같이 Path를 정의하면 됩니다.
    // Path path = Path()..addOval(Rect.fromCircle(center: Offset(size.width/2, size.height/2), radius: 100.0));
    // 여기서는 간단한 사각형 클리퍼를 만들어보겠습니다.
    
    Path path = Path();
    // 왼쪽 상단부터 우측 상단까지 선을 그립니다.
    path.lineTo(size.width, 0);
    // 우측 하단부터 왼쪽 하단까지 선을 그립니다.
    path.lineTo(size.width, size.height);
    // 왼쪽 하단부터 왼쪽 상단까지 선을 그립니다.
    path.lineTo(0, size.height);
    // 왼쪽 상단으로 이동하여 경로를 닫습니다.
    path.close();

    return path;
  }

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

2.2 애니메이션 적용하기

이제 앱 배경에 클리퍼를 적용하고 애니메이션을 적용해보겠습니다. 다음 코드를 확인해주세요.

class MyAnimatedBackground extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(seconds: 2),
      curve: Curves.easeInOut,
      // 애니메이션 효과를 적용할 컨테이너입니다.
      decoration: BoxDecoration(
        color: Colors.blue, // 배경색을 설정합니다.
        // 클리퍼를 적용하여 배경을 원하는 형태로 만듭니다.
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.all(Radius.circular(0)),
        // CustomClipper를 사용하여 클리퍼를 설정합니다.
        clipper: MyClipper(),
      ),
    );
  }
}

2.3 앱 배경에 애니메이션 추가하기

이제 앱의 배경에 애니메이션을 추가해보겠습니다. 다음 코드를 확인해주세요.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children:[
            MyAnimatedBackground(), // 애니메이션이 적용된 배경
            Center(
              child: Text(
                '앱 내용',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 Stack 위젯을 사용하여 배경에 애니메이션을 적용한 컨테이너와 앱의 내용을 겹쳐서 보여줍니다. 여기서 MyAnimatedBackground() 위젯을 사용하여 애니메이션이 적용된 배경을 만들고, Text 위젯을 사용하여 앱의 내용을 표시합니다.

이제 위의 방법을 사용하여 Flutter 앱의 배경에 애니메이션을 구현할 수 있습니다. 클리퍼와 애니메이션을 유연하게 조합하여 다양한 앱 디자인을 구현해보세요!

더 많은 내용을 알고 싶다면 플러터 공식 문서를 참고하세요.