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

05 Dec 2023

flutter

header_animation

플러터(Flutter)를 사용하면 애니메이션을 구현하는 것이 매우 간단합니다. 이번 포스트에서는 클리퍼(Clipper)를 이용하여 플러터 앱의 헤더에 애니메이션 효과를 추가하는 방법에 대해 알아보겠습니다.

1. 애니메이션을 위한 패키지 추가

먼저, flutter/material.dart 패키지에 이미 제공되는 애니메이션을 위해 animation 패키지를 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음 코드를 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  animation: ^1.0.0

이제 터미널에서 flutter packages get 명령을 실행하여 패키지를 설치합니다.

2. 애니메이션을 위한 코드 작성

import 'package:flutter/material.dart';

class HeaderAnimation extends StatefulWidget {
  @override
  _HeaderAnimationState createState() => _HeaderAnimationState();
}

class _HeaderAnimationState extends State<HeaderAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    );
    _animation = Tween(begin: 0.0, end: 100.0).animate(_animationController);
    _animationController.repeat(reverse: true);
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animation,
      builder: (BuildContext context, Widget child) {
        return ClipPath(
          clipper: CustomClipperClass(_animation.value),
          child: Container(
            height: 200.0,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Header Animation',
                style: TextStyle(
                  fontSize: 24.0,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}

class CustomClipperClass extends CustomClipper<Path> {
  final double xOffset;

  CustomClipperClass(this.xOffset);

  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height);
    path.lineTo(size.width * 0.2, size.height - xOffset);
    path.lineTo(size.width * 0.8, size.height - xOffset);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    path.close();
    return path;
  }

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

3. 애니메이션 사용하기

이제 애니메이션을 사용하려는 화면의 build 메서드에서 HeaderAnimation 위젯을 사용하면 됩니다:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Header Animation Example'),
        ),
        body: Column(
          children: [
            HeaderAnimation(),
            // 다른 위젯들 추가
          ],
        ),
      ),
    );
  }
}

헤더 영역에 클리퍼를 적용하여 애니메이션 효과를 생성하는 HeaderAnimation 위젯을 Column 위젯 안에 추가합니다. 애니메이션 효과를 가진 헤더를 구현할 수 있습니다.

간단한 방법으로 클리퍼를 이용하여 플러터 앱의 헤더에 애니메이션을 추가하는 방법을 알아보았습니다. 이를 응용하여 더 다양한 애니메이션 효과를 구현할 수 있습니다. Flutter의 풍부한 애니메이션 기능으로 멋진 앱을 만드시기 바랍니다!