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

05 Dec 2023

flutter

개요

플러터(Flutter)는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 아름답고 간편한 사용자 인터페이스(UI)를 구축하기 위해 다양한 기능을 제공합니다. 이번 글에서는 클리퍼(Clipper)를 사용하여 플러터 앱의 헤더에 애니메이션 효과를 구현하는 방법을 알아보겠습니다.

클리퍼란?

클리퍼(Clipper)는 플러터에서 사용자 정의 클리핑 모양을 생성하는 데 사용되는 클래스입니다. 클리핑은 특정 모양의 경로로 요소를 자르거나 둘러싸는 것을 말합니다. 이를 통해 효과적인 애니메이션 및 사용자 정의 디자인을 구현할 수 있습니다.

구현 방법

먼저, 플러터 프로젝트를 생성한 후 필요한 종속성을 추가해야 합니다. pubspec.yaml 파일을 열고 아래의 종속성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter

cupertino_icons: ^1.0.2

이제 메인 앱 파일(main.dart)을 열고 다음 코드로 시작합니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Header Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Header Animation'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            ClipPath(
              clipper: HeaderClipper(),
              child: Container(
                height: 200,
                color: Colors.blue,
                child: Center(
                  child: Text(
                    'Header',
                    style: TextStyle(
                      fontSize: 32,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
            ),
            // Add other content here
          ],
        ),
      ),
    );
  }
}

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

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

위의 코드는 HomePage 위젯에서 앱의 헤더 애니메이션을 구현하는 데 사용됩니다. ClipPath 위젯을 사용하여 클리퍼 모양을 만들고, Container로 헤더를 구성합니다. Center 위젯을 사용하여 텍스트를 가운데로 정렬합니다.
HeaderClipper 클래스는 CustomClipper 클래스를 확장하여 클리핑 모양을 정의합니다. getClip 메소드에서 경로를 설정하고, shouldReclip 메소드에서 클리핑이 변경될 때마다 클리퍼를 다시 그릴지 여부를 설정합니다.
마지막으로, 앱을 실행하여 헤더 애니메이션을 확인할 수 있습니다. 헤더가 클리핑 모양에 따라 부드럽게 변경될 것입니다.

결론

이번 글에서는 클리퍼를 사용하여 플러터 앱의 헤더 애니메이션을 구현하는 방법을 알아보았습니다. 플러터의 다양한 기능을 활용하여 앱에 독특한 디자인과 사용자 경험을 제공할 수 있습니다.

개요

클리퍼란?

구현 방법

결론

참고 자료