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

05 Dec 2023

flutter

소개

Flutter는 다양한 애니메이션을 만들 수 있는 강력한 기능을 제공합니다. 그 중에서도 velocity_x는 간단하고 직관적인 방식으로 애니메이션을 구현할 수 있게 도와줍니다. 이 글에서는 velocity_x 패키지를 사용하여 Flutter 앱에 다운로드 애니메이션을 만드는 방법에 대해 다룰 것입니다.

velocity_x 패키지 설치하기

먼저, velocity_x 패키지를 설치해야 합니다. pubspec.yaml 파일을 열고 아래와 같이 패키지를 추가해주세요:

dependencies:
  velocity_x: ^2.0.0

저장한 후, 터미널에서 아래 명령어를 실행하여 패키지를 설치합니다:

flutter pub get

다운로드 애니메이션 만들기

이제 다운로드 애니메이션을 만들어보겠습니다. 다음의 코드를 참고하세요:

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

class DownloadAnimation extends StatefulWidget {
  @override
  _DownloadAnimationState createState() => _DownloadAnimationState();
}

class _DownloadAnimationState extends State<DownloadAnimation> {
  bool _isDownloading = false;
  double _progress = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Download Animation'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            width: _isDownloading ? 200 : 100,
            height: _isDownloading ? 200 : 100,
            color: _isDownloading ? Colors.blue : Colors.grey,
            child: _isDownloading
                ? CircularProgressIndicator(
                    value: _progress,
                  )
                : Icon(
                    Icons.cloud_download,
                    size: 50,
                    color: Colors.white,
                  ),
          ),
          SizedBox(height: 20),
          RaisedButton(
            child: Text(_isDownloading ? 'Cancel' : 'Download'),
            onPressed: () {
              setState(() {
                if (_isDownloading) {
                  _isDownloading = false;
                } else {
                  _isDownloading = true;
                  _startDownload();
                }
              });
            },
          ),
        ],
      ),
    );
  }

  void _startDownload() {
    Future.delayed(const Duration(milliseconds: 500), () {
      setState(() {
        _progress = 0.1;
      });
    });

    Future.delayed(const Duration(milliseconds: 1000), () {
      setState(() {
        _progress = 0.3;
      });
    });

    Future.delayed(const Duration(milliseconds: 1500), () {
      setState(() {
        _progress = 0.6;
      });
    });

    Future.delayed(const Duration(milliseconds: 2000), () {
      setState(() {
        _progress = 1.0;
        _isDownloading = false;
      });
    });
  }
}

void main() {
  runApp(
    MaterialApp(
      home: DownloadAnimation(),
    ),
  );
}

이 코드는 간단한 다운로드 애니메이션을 구현한 것입니다. _isDownloading 변수로 다운로드 상태를 관리하고, _progress 변수로 진행 상태를 표시합니다. _startDownload 함수는 다운로드 프로세스를 시뮬레이션합니다.

실행결과

앱을 실행하면 다운로드 버튼을 누르면 애니메이션이 시작되고, 프로그레스 바가 진행됩니다. 다운로드가 완료되면 프로그레스 바가 사라지고, 다시 다운로드 버튼이 나타납니다.

결론

velocity_x를 사용하여 다운로드 애니메이션을 구현하는 방법에 대해 알아보았습니다. velocity_x를 활용하면 간단하면서도 멋진 애니메이션을 쉽게 만들 수 있습니다. 추가적인 정보는 velocity_x 패키지를 참고하세요.