[flutter] 플러터 Lottie로 계산기 앱의 버튼 클릭 애니메이션 구현하기

05 Dec 2023

flutter

계산기 앱은 많은 사용자들에게 익숙한 기능을 제공합니다. 그러나 종종 디자인적인 측면에서는 다소 단조로운 면이 있습니다. 이러한 단조로운 디자인을 개선하기 위해 Lottie 애니메이션을 사용하여 버튼 클릭 시 다양한 효과를 추가할 수 있습니다. 이번 튜토리얼에서는 플러터와 Lottie를 사용하여 계산기 앱의 버튼 클릭 애니메이션을 구현하는 방법에 대해 알아보겠습니다.

필요한 패키지 설치하기

먼저, Lottie 애니메이션을 사용하기 위해 플러터의 lottie 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 패키지를 추가해주세요:

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

패키지를 설치하기 위해 터미널에서 다음 명령을 실행해주세요:

flutter pub get

Lottie 애니메이션 파일 준비하기

Lottie 애니메이션을 사용하기 위해 JSON 형식의 애니메이션 파일이 필요합니다. 이러한 애니메이션 파일은 다양한 디자인 리소스 사이트에서 무료로 다운로드할 수 있습니다. 예를 들어, LottieFiles에서 다양한 애니메이션 파일을 검색하고 다운로드할 수 있습니다.

다운로드한 JSON 파일을 프로젝트의 assets 폴더에 저장합니다.

Lottie 애니메이션 위젯 생성하기

이제 Lottie 애니메이션을 앱에 통합해보겠습니다. 먼저, assets 폴더에 저장한 Lottie 애니메이션 파일을 앱에 로드하기 위해 pubspec.yaml 파일에 다음과 같이 설정해주세요:

flutter:
  assets:
    - assets/your_animation.json

애니메이션을 사용할 화면의 위젯에 다음 코드를 추가하여 Lottie 애니메이션을 로드합니다:

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

class CalculatorScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('계산기'),
      ),
      body: Column(
        children: [
          // 다른 위젯들 추가
          Lottie.asset(
            'assets/your_animation.json',
            width: 200,
            height: 200,
          ),
          // 다른 위젯들 추가
        ],
      ),
    );
  }
}

위 코드에서 Lottie.asset() 위젯을 사용하여 JSON 파일을 로드하고 화면에 표시합니다. width와 height 매개변수는 애니메이션의 크기를 조정하는 데 사용됩니다.

애니메이션 트리거 설정하기

이제 버튼 클릭 시 Lottie 애니메이션을 트리거하기 위해 상태 관리를 설정해보겠습니다. 먼저, CalculatorScreen 위젯의 상태를 관리하기 위해 StatefulWidget을 사용해야 합니다.

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

class CalculatorScreen extends StatefulWidget {
  @override
  _CalculatorScreenState createState() => _CalculatorScreenState();
}

class _CalculatorScreenState extends State<CalculatorScreen> {
  String _displayText = '';

  void _handleButtonClick() {
    // 버튼 클릭 시 실행되는 로직을 여기에 작성합니다.

    // Lottie 애니메이션을 트리거하기 위한 코드를 추가합니다.
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('계산기'),
      ),
      body: Column(
        children: [
          // 다른 위젯들 추가
          Lottie.asset(
            'assets/your_animation.json',
            width: 200,
            height: 200,
          ),
          // 다른 위젯들 추가
          RaisedButton(
            child: Text('버튼'),
            onPressed: _handleButtonClick,
          ),
        ],
      ),
    );
  }
}

_handleButtonClick() 메서드에서는 버튼 클릭 시 실행될 로직을 작성하고, 이전에 생성한 Lottie 애니메이션을 트리거하기 위한 코드를 추가합니다.

애니메이션 효과 추가하기

이제 Lottie 애니메이션을 트리거하는 코드를 작성해보겠습니다. 예를 들어, 버튼 클릭 시 애니메이션이 재생되고 일정 시간 후에 애니메이션이 멈추는 효과를 구현하려면 다음과 같이 flutter_hooks 패키지를 사용할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class CalculatorScreen extends StatefulWidget {
  @override
  _CalculatorScreenState createState() => _CalculatorScreenState();
}

class _CalculatorScreenState extends State<CalculatorScreen> {
  String _displayText = '';

  void _handleButtonClick() {
    setState(() {
      _displayText = '버튼이 클릭되었습니다.';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('계산기'),
      ),
      body: Column(
        children: [
          // 다른 위젯들 추가
          LottieAnimationButton(
            animationPath: 'assets/your_animation.json',
            onAnimationStart: () {
              // 애니메이션 시작 시 실행되는 로직을 작성합니다.
            },
            onAnimationEnd: () {
              // 애니메이션 종료 시 실행되는 로직을 작성합니다.
            },
            child: RaisedButton(
              child: Text('버튼'),
              onPressed: _handleButtonClick,
            ),
          ),
        ],
      ),
    );
  }
}

class LottieAnimationButton extends HookWidget {
  final String animationPath;
  final Function() onAnimationStart;
  final Function() onAnimationEnd;
  final Widget child;

  LottieAnimationButton({
    @required this.animationPath,
    @required this.onAnimationStart,
    @required this.onAnimationEnd,
    @required this.child,
  });

  @override
  Widget build(BuildContext context) {
    final controller = useAnimationController(
      duration: Duration(milliseconds: 2000),
    );

    useEffect(() {
      if (controller.status == AnimationStatus.completed) {
        controller.reset();
        onAnimationEnd?.call();
      }
    });

    return GestureDetector(
      onTapDown: (_) {
        controller.forward();
        onAnimationStart?.call();
      },
      child: Stack(
        children: [
          child,
          Positioned.fill(
            child: Lottie.asset(
              animationPath,
              controller: controller,
              onLoaded: (composition) {
                controller.duration = composition.duration;
              },
            ),
          ),
        ],
      ),
    );
  }
}

위의 코드에서는 flutter_hooks 패키지를 사용하여 애니메이션의 시작과 종료 시점을 관리합니다. LottieAnimationButton 위젯을 사용하여 버튼 위에 Lottie 애니메이션을 추가합니다. animationPath 매개변수는 Lottie 애니메이션 파일의 경로를 전달하는 역할을 합니다. onAnimationStart과 onAnimationEnd 콜백 함수는 애니메이션 시작 및 종료 시 실행될 로직을 작성하는 데 사용됩니다. 버튼을 클릭하면 애니메이션이 재생되고, 재생이 완료되면 애니메이션이 멈춥니다.

결론

위의 튜토리얼에서는 플러터와 Lottie를 사용하여 계산기 앱의 버튼 클릭 애니메이션을 구현하는 방법을 알아보았습니다. Lottie 애니메이션을 통해 앱에 다양한 효과를 추가할 수 있으며, 상태 관리를 함께 사용하여 애니메이션을 트리거하는 기능을 구현할 수 있습니다. 이러한 애니메이션 효과를 추가하여 사용자 경험을 향상시킬 수 있습니다.

이제 여러분은 플러터와 Lottie를 사용하여 자신만의 멋진 애니메이션을 구현할 수 있습니다. 새로운 기능을 추가하거나 다른 애니메이션을 시도해보는 등의 다양한 방법으로 앱을 개선할 수 있습니다. 플러터와 Lottie의 다양한 기능과 옵션을 탐색해보고, 자신의 앱에 애니메이션을 추가하여 다른 사람들에게 인상적인 경험을 제공해보세요!