[flutter] 플러터 Column 위젯을 이용한 애니메이션 효과 구현하기

20 Dec 2023

flutter

소개

플러터(Flutter)는 구글에서 개발한 모바일 애플리케이션 개발 프레임워크로서, 크로스 플랫폼 개발을 지원하며 안정적이고 성능이 우수합니다. 이번 프로젝트에서는 Flutter의 Column 위젯을 사용하여 간단한 애니메이션 효과를 구현하는 방법에 대해 소개하겠습니다.

스텝 1: Flutter 프로젝트 설정

가장 먼저, Flutter 프로젝트를 설정합니다. flutter create 명령어로 프로젝트를 생성하고, 필요한 라이브러리를 pubspec.yaml 파일에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  AnimatedBuilder: ^1.1.0  // 애니메이션 구현을 위한 라이브러리

스텝 2: Column 위젯 활용

Column 위젯을 사용하여 세로 방향으로 위젯을 배치합니다. 각 위젯에 애니메이션을 적용하기 위해 AnimatedBuilder를 활용합니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.blue,
      ),
    ),
    AnimatedBuilder(
      animation: _controller,
      builder: (BuildContext context, Widget child) {
        return Transform.rotate(
          angle: _controller.value * 2.0 * math.pi,
          child: child,
        );
      },
      child: Container(
        width: 100,
        height: 100,
        color: Colors.red,
      ),
    ),
  ],
),

스텝 3: 애니메이션 효과 적용

위 코드에서 _controller는 AnimationController로 초기화되며, 애니메이션의 시작과 끝 값을 설정해야 합니다. 이후 addListener 메서드를 사용하여 애니메이션의 값이 변경될 때마다 화면을 다시 그리도록 설정합니다.

controller = AnimationController(
  duration: const Duration(seconds: 5),
  vsync: this,
);
controller.forward();

마무리

위의 코드를 사용하여 Column 위젯을 통해 간단한 애니메이션 효과를 구현할 수 있습니다. Flutter의 강력한 위젯과 애니메이션 기능을 활용하여 더 다양하고 복잡한 애니메이션도 구현할 수 있습니다.

참고 문헌:

Flutter 공식 홈페이지: https://flutter.dev
Flutter 애니메이션 가이드: https://flutter.dev/docs/development/ui/animations