[flutter] velocity_x를 사용하여 어떻게 색상 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

velocity_x는 Flutter 개발자들이 UI를 구축하고 애니메이션을 추가하기 위해 사용하는 라이브러리입니다. 이번 블로그에서는 velocity_x를 사용하여 Flutter 앱에서 색상 애니메이션을 만드는 방법에 대해 알아보겠습니다.

필요한 패키지 가져오기

먼저, velocity_x와 animations 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 다음 코드를 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: <버전>
  animations: <버전>

그리고 패키지를 가져오기 위해 다음 코드를 상단에 추가합니다:

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';
import 'package:animations/animations.dart';

색상 애니메이션 추가하기

주어진 위젯의 색상을 애니메이션으로 변화시키기 위해 AnimatedContainer 위젯을 사용할 것입니다. 하지만, velocity_x를 사용하여 더 간단하고 편리하게 색상 애니메이션을 만들 수 있습니다.

단계별로 진행해보겠습니다:

Color 변수를 선언하여 색상 값을 저장합니다.

Color _myColor = Colors.blue;

애니메이션을 트리거하기 위해 여러 위젯을 생성하고, 각 위젯의 색상이 _myColor 변수와 같아지도록 설정합니다.

ScaledBox(
  // 기본 크기
  child: Container().box(width: 200, height: 200),
  // 색상 애니메이션
  gradients: [
    Colors.blue,
    Colors.red,
  ].lerpTo(_myColor.value),
)

애니메이션을 실행할 수 있는 방법을 추가합니다. 예를 들어, onTap 이벤트를 사용하여 색상이 변경되도록 설정할 수 있습니다.

GestureDetector(
  onTap: () {
    setState(() {
      _myColor = Colors.red;
    });
  },
  child: ScaledBox(
    child: Container().box(width: 200, height: 200),
    gradients: [
      Colors.blue,
      Colors.red,
    ].lerpTo(_myColor.value),
  ),
)

위의 예제에서는 onTap 이벤트가 발생할 때마다 _myColor 변수가 Colors.red로 변경되고, 색상 애니메이션이 시작됩니다. 즉, Colors.blue에서 Colors.red로 부드럽게 변화하는 색상 애니메이션이 생성됩니다.

이제 velocity_x를 사용하여 Flutter 앱에서 색상 애니메이션을 구현하는 방법을 알게 되었습니다. velocity_x는 매우 유용한 도구이며, 앱에 다양한 유형의 애니메이션을 추가할 수 있습니다. 다른 종류의 애니메이션을 시도해 보고, Flutter 앱을 더욱 멋지게 만들어 보세요!

필요한 패키지 가져오기

색상 애니메이션 추가하기

참고 문서