[flutter] velocity_x를 사용하여 어떻게 풀다운 재생 애니메이션을 만들 수 있는가?

05 Dec 2023

flutter

풀다운 재생 애니메이션은 사용자가 화면을 아래로 당기면 새로운 콘텐츠를 새로고침하기 위해 제공되는 기능입니다. 이번 튜토리얼에서는 Flutter의 velocity_x 패키지를 사용하여 간단한 풀다운 재생 애니메이션을 구현하는 방법을 알아보겠습니다.

1. velocity_x 패키지 추가하기

먼저, pubspec.yaml 파일에 velocity_x 패키지를 추가해야 합니다. 아래와 같이 dependencies 항목에 velocity_x 패키지를 추가하세요.

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.2.1

그리고 패키지를 다운로드하려면 터미널에서 다음 명령어를 실행하세요.

flutter pub get

2. 풀다운 재생 애니메이션 구현하기

다음으로, main.dart 파일을 열고 필요한 패키지를 가져옵니다.

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

그리고 풀다운 재생 애니메이션을 위한 StatefulWidget을 작성합니다.

class PullToRefreshAnimation extends StatefulWidget {
  @override
  _PullToRefreshAnimationState createState() => _PullToRefreshAnimationState();
}

class _PullToRefreshAnimationState extends State<PullToRefreshAnimation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Pull to Refresh Animation'),
      ),
      body: GestureDetector(
        onVerticalDragUpdate: (details) {
          if (details.delta.dy > 0) {
            // 아래로 당긴 경우 새로고침 로직을 실행합니다.
            _refreshData();
          }
        },
        child: VxBox(
          child: Column(
            children: [
              Text('Pull Down to Refresh').centered().p16(),
              Spacer(),
              FlutterLogo(size: 100),
              Spacer(),
            ],
          ),
        ).color(Colors.white).make().p32(),
      ),
    );
  }

  void _refreshData() {
    // 새로고침 로직을 여기에 구현합니다.
    // 데이터를 가져오거나 업데이트하는 등 원하는 작업을 수행합니다.
  }
}

위의 코드에서는 GestureDetector 위젯을 사용하여 사용자가 화면을 아래로 당길 때 이벤트를 감지하고, _refreshData 메소드를 호출하여 새로고침 로직을 실행하도록 했습니다.

3. 앱 실행하기

마지막으로, 앱을 실행하기 위해 main.dart 파일을 다음과 같이 수정합니다.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PullToRefreshAnimation(),
    );
  }
}

이제 앱을 실행하면 “Pull Down to Refresh”라는 텍스트와 플러터 로고가 있는 화면이 나타납니다. 사용자가 화면을 아래로 당기면 _refreshData 메소드를 호출하여 새로고침 로직을 실행할 수 있습니다.

이것으로 velocity_x를 사용하여 풀다운 재생 애니메이션을 만들었습니다. 이번 튜토리얼이 도움이 되었기를 바랍니다!

1. velocity_x 패키지 추가하기

2. 풀다운 재생 애니메이션 구현하기

3. 앱 실행하기

참고