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

05 Dec 2023

flutter

Flutter는 사용자 인터페이스를 구현하기 위한 인기 있는 프레임워크입니다. velocity_x는 강력한 Flutter 라이브러리 중 하나로, UI 요소를 간단하게 만들고 애니메이션을 적용할 수 있게 도와줍니다. 이번 블로그 포스트에서는 velocity_x를 사용하여 로딩 버튼 애니메이션을 만드는 방법을 알아보겠습니다.

velocity_x 패키지 가져오기

먼저, 프로젝트에 velocity_x 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  velocity_x: ^1.2.1

패키지를 추가한 후에는 flutter pub get 명령을 실행하여 종속성을 가져옵니다.

로딩 버튼 위젯 만들기

이제 로딩 버튼 위젯을 만들어보겠습니다. 다음은 로딩 아이콘과 텍스트를 표시하는 간단한 위젯입니다:

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

class LoadingButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  LoadingButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return VxBuilder(
      builder: (context, _) => ElevatedButton(
        onPressed: onPressed,
        style: ElevatedButton.styleFrom(
          primary: Colors.blue,
          padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
        ),
        child: _.isFalse
            ? text
            : CircularProgressIndicator(
                valueColor: AlwaysStoppedAnimation(Colors.white),
              ),
      ),
      mutations: {CircularProgressIndicator(): _.isTrue},
    );
  }
}

위의 코드에서는 VxBuilder 위젯을 사용하여 애니메이션 변화를 감지하고 상태에 따라 로드인 아이콘 또는 텍스트를 표시합니다.

위젯 사용하기

이제 위에서 만든 LoadingButton 위젯을 사용하여 화면에 로딩 버튼을 추가할 수 있습니다. 다음은 간단한 예시입니다:

import 'package:flutter/material.dart';
import 'package:your_project_name/your_loading_button_file.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Loading Button Example"),
      ),
      body: Center(
        child: LoadingButton(
          text: "Click me",
          onPressed: () {
            // 버튼이 클릭되면 수행될 동작
          },
        ),
      ),
    );
  }
}

이제 로딩 버튼이 있는 홈 화면을 확인할 수 있습니다.

velocity_x를 사용하여 로딩 버튼 애니메이션을 만드는 방법에 대해 알아보았습니다. velocity_x의 강력한 기능을 사용하면 간단하게 다양한 애니메이션 효과를 구현할 수 있습니다. 더 많은 자세한 내용은 velocity_x 문서를 참조하십시오.