Flutter는 애니메이션을 만들고 제어하기에 매우 강력한 기능을 제공합니다. 그 중에서도 velocity_x 패키지는 간편하고 직관적인 방법으로 애니메이션을 구현할 수 있도록 도와줍니다.

이번 포스트에서는 velocity_x를 사용하여 간단한 로딩 애니메이션을 만들어보겠습니다.

먼저, 프로젝트의 pubspec.yaml 파일에 velocity_x 패키지를 추가해주세요. 아래와 같이 dependencies 섹션에 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.2.2

패키지를 추가한 후, flutter pub get 명령어를 실행하여 패키지를 다운로드 받습니다.

이제 로딩 애니메이션을 만들 준비가 되었습니다. 아래의 코드를 사용하여 심플한 로딩 애니메이션을 만들 수 있습니다.

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

class LoadingAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CircularProgressIndicator()
        .centered()
        .box
        .p16
        .roundedLg
        .color(Colors.grey[300])
        .shadow
        .make()
        .wh(100, 100);
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Animation',
      home: Scaffold(
        body: LoadingAnimation(),
      ),
    );
  }
}

이 코드에서는 velocity_x의 체인 문법을 사용하여 로딩 애니메이션을 구성했습니다.

CircularProgressIndicator() 위젯은 동그란 로딩 인디케이터를 생성합니다. .centered() 메서드를 사용하여 중앙으로 정렬하고, .box를 호출하여 배경색과 크기를 조정합니다.

.p16을 사용하여 위젯 주위에 16px의 padding을 추가하고, .roundedLg로 위젯을 둥글게 만듭니다. .color() 메서드를 사용하여 배경 색상을 지정하고, .shadow를 호출하여 그림자 효과를 추가합니다.

.make()를 호출하여 최종 위젯을 생성하고, .wh(100, 100) 메서드를 통해 위젯의 너비와 높이를 100으로 설정합니다.

프로그램을 실행하면 로딩 애니메이션이 화면 중앙에 표시됩니다.

velocity_x를 사용하면 이와 같이 간단하고 직관적인 방법으로 다양한 애니메이션을 만들 수 있습니다. velocity_x는 유용한 체인 문법과 다양한 리팩토링 도구를 제공하여 개발자들이 더욱 효율적으로 애니메이션을 구현할 수 있게 해줍니다.

더 많은 velocity_x의 기능과 사용법은 공식 문서를 참고하시기 바랍니다.

• velocity_x 공식 문서

지금까지 velocity_x를 사용하여 심플한 로딩 애니메이션을 만드는 방법에 대해 알아보았습니다. 애니메이션을 구현할 때 velocity_x를 활용하면 개발 과정을 더욱 즐길 수 있을 것입니다.