[flutter] 플러터 Lottie로 로그인 앱의 로딩 애니메이션 효과 추가하기

05 Dec 2023

flutter

로그인 앱을 개발할 때, 로딩 화면에 동적인 애니메이션을 추가하면 사용자에게 더욱 직관적인 경험을 제공할 수 있습니다. 이번에는 Flutter 앱에 Lottie 라이브러리를 사용하여 로그인 앱의 로딩 애니메이션 효과를 추가하는 방법을 알아보겠습니다.

Lottie 소개

Lottie는 Airbnb에서 개발한 오픈소스 라이브러리로, Adobe After Effects로 제작한 애니메이션을 앱에 적용할 수 있도록 도와줍니다. Flutter에서도 Lottie를 사용할 수 있어, 높은 품질의 애니메이션을 쉽게 구현할 수 있습니다.

시작하기 전에

플러터 프로젝트에 Lottie를 추가하기 위해서는 다음 단계를 따라야 합니다:

pubspec.yaml 파일에서 dependencies 섹션에 lottie 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.0.0

터미널에서 flutter packages get 명령을 실행하여 패키지를 다운로드합니다.

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

Lottie를 이용하여 로딩 애니메이션을 추가하기 위해서는 먼저 Lottie 애니메이션 파일을 가져와야 합니다. Lottiefiles 웹사이트(https://lottiefiles.com)에서 다양한 Lottie 애니메이션을 무료로 다운로드할 수 있습니다. 로그인 앱에 어울리는 애니메이션을 선택하고 다운로드합니다.

Lottie 애니메이션 파일 추가하기

다운로드한 Lottie 애니메이션 파일을 Flutter 프로젝트의 assets 폴더에 추가합니다. pubspec.yaml 파일에 애니메이션 파일을 asset으로 추가해야합니다.

flutter:
  assets:
    - assets/loading_animation.json

앱에 Lottie 애니메이션 구현하기

이제 Lottie 애니메이션을 앱에 추가해볼 차례입니다. Lottie.asset 위젯을 사용하여 로딩 애니메이션을 화면에 표시할 수 있습니다.

다음은 간단한 예제 코드입니다:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Loading Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoadingScreen(),
    );
  }
}

class LoadingScreen extends StatefulWidget {
  @override
  _LoadingScreenState createState() => _LoadingScreenState();
}

class _LoadingScreenState extends State<LoadingScreen> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 2),
    )..repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Lottie.asset(
          'assets/loading_animation.json',
          controller: _controller,
          height: 200,
          width: 200,
        ),
      ),
    );
  }
}

위 코드에서는 LoadingScreen 위젯에서 Lottie 애니메이션 파일을 로딩하고, AnimationController를 사용하여 애니메이션을 제어합니다. Lottie.asset 위젯은 Lottie 애니메이션을 화면에 표시합니다. 애니메이션의 크기는 height와 width 속성을 통해 조정할 수 있습니다.

결론

이제 플러터 Lottie 라이브러리를 사용하여 로그인 앱에 로딩 애니메이션을 추가하는 방법을 알아보았습니다. Lottie를 이용하면 사용자에게 더욱 흥미로운 사용자 경험을 제공할 수 있으며, Flutter 앱의 사용성을 향상시킬 수 있습니다.

참고문서:

Lottie 라이브러리: https://pub.dev/packages/lottie

이제 로그인 앱에 동적인 로딩 애니메이션을 추가해보세요!