[flutter] 플러터 Lottie와 로그인 폼 애니메이션 동기화

05 Dec 2023

flutter

플러터(Flutter)를 사용하여 앱 개발을 할 때, 사용자 인터페이스(UI)에 애니메이션을 적용하는 것은 매우 중요합니다. 이러한 애니메이션 중 하나인 Lottie는 디자이너가 만든 After Effects 애니메이션을 앱에 쉽게 통합할 수 있는 기능을 제공합니다. 이번 블로그 포스트에서는 플러터 Lottie 라이브러리를 사용하여 로그인 폼 애니메이션과 로그인 기능을 동기화하는 방법에 대해 알아보겠습니다.

Lottie 라이브러리 추가하기

우선, 프로젝트에 Lottie 라이브러리를 추가해야 합니다. pubspec.yaml 파일을 열고 다음과 같이 lottie 라이브러리를 추가합니다.

dependencies:
  flutter:
    sdk: flutter

  lottie: ^1.0.0 # Lottie library

변경 내용을 저장한 후, 터미널에서 flutter pub get 명령어를 실행하여 종속성을 다운로드합니다.

Lottie 애니메이션 파일 가져오기

Lottie 라이브러리가 추가되었으니 이제 사용할 애니메이션 파일을 가져와야 합니다. Lottiefiles 웹사이트(https://lottiefiles.com)에서 디자이너가 만든 로그인 폼 애니메이션 파일을 다운로드합니다. 다운로드한 파일은 프로젝트의 assets 폴더에 저장합니다.

Lottie 애니메이션 위젯 추가하기

로그인 폼 애니메이션을 화면에 표시하기 위해 Lottie 애니메이션 위젯을 추가해야 합니다. 플러터 위젯 트리에 Lottie.asset 위젯을 추가하여 애니메이션을 표시할 수 있습니다. 다음은 예시 코드입니다.

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

class LoginFormScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/login_animation.json',
              height: 200,
              width: 200,
            ),
            SizedBox(height: 40),
            // 로그인 폼 UI 추가
            // 로그인 기능 추가
          ],
        ),
      ),
    );
  }
}

위 코드에서 Lottie.asset 위젯에는 애니메이션 파일(login_animation.json)의 경로와 크기(height, width)를 설정하였습니다. 필요에 따라 애니메이션 위젯의 속성을 조정할 수 있습니다.

로그인 폼 애니메이션과 동기화하기

로그인 폼 애니메이션을 표시한 후, 로그인 기능과 애니메이션을 동기화하여 사용자에게 시각적인 피드백을 제공할 수 있습니다. 이를 위해 애니메이션 위젯의 컨트롤러를 사용하여 특정 이벤트에 따라 애니메이션을 제어할 수 있습니다.

예를 들어, 로그인 버튼을 누르면 로그인이 성공했을 때 “로그인 성공” 애니메이션이 재생되도록 할 수 있습니다. 다음은 예시 코드입니다.

class LoginFormScreen extends StatefulWidget {
  @override
  _LoginFormScreenState createState() => _LoginFormScreenState();
}

class _LoginFormScreenState extends State<LoginFormScreen>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;

  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  void _login() {
    // 로그인 기능 구현

    // 로그인 성공 시 애니메이션 재생
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/login_animation.json',
              height: 200,
              width: 200,
              controller: _animationController,
              onLoaded: (_) {
                // 애니메이션 로드 완료 시, 준비 상태로 초기화
                _animationController.reset();
              },
            ),
            SizedBox(height: 40),
            RaisedButton(
              onPressed: _login,
              child: Text('로그인'),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서 _login 메소드는 로그인 버튼이 눌렸을 때 호출됩니다. 로그인 기능을 구현한 후, 성공적으로 로그인되었다면 _animationController.forward() 메소드를 통해 애니메이션을 재생할 수 있습니다.

이렇게 애니메이션과 로그인 기능을 동기화하여 사용자에게 더 흥미로운 사용자 경험을 제공할 수 있습니다.

결론

플러터 Lottie 라이브러리를 사용하면 앱에 다양한 애니메이션을 쉽게 추가할 수 있습니다. 이번 포스트에서는 로그인 폼 애니메이션과 로그인 기능을 동기화하는 방법을 알아보았습니다. 이를 통해 사용자에게 더욱 매력적인 인터페이스를 제공할 수 있습니다.

만약 플러터를 사용하여 앱 개발을 하고 있다면, Lottie 라이브러리를 사용해보고 사용자 경험을 개선하는데 활용해보세요!