[flutter] 플러터 Lottie를 활용한 로그인 화면 구현하기

05 Dec 2023

flutter

플러터(Flutter)는 손쉽게 멋진 UI와 애니메이션을 적용할 수 있는 크로스 플랫폼 앱 개발 프레임워크입니다. 이번 튜토리얼에서는 플러터의 Lottie 패키지를 활용하여 로그인 화면을 구현하는 방법을 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 오픈 소스 애니메이션 라이브러리로, JSON 파일 형식으로 작성된 애니메이션을 앱에 쉽게 통합할 수 있습니다. Lottie는 After Effects와 Bodymovin 플러그인을 사용하여 애니메이션을 만들고, 이를 JSON 파일로 변환하여 사용할 수 있습니다.

필요한 패키지 설치하기

먼저, 플러터 프로젝트에 Lottie 패키지를 설치해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 아래와 같이 추가합니다.

dependencies:
  lottie: ^1.0.0

그리고, 패키지를 설치하기 위해 터미널에서 다음 명령어를 실행합니다.

$ flutter pub get

로그인 화면 디자인하기

로그인 화면을 디자인하기 위해 다음과 같은 구성 요소가 필요합니다.

로고 이미지
이메일 및 비밀번호 입력 필드
로그인 버튼

이번 예제에서는 Lottie를 사용해서 로고 이미지에 애니메이션을 적용합니다.

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

class LoginPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로그인'),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Lottie.asset(
              'assets/animations/login_animation.json',
              height: 200,
            ),
            SizedBox(height: 20),
            TextField(
              decoration: InputDecoration(
                hintText: '이메일',
              ),
            ),
            SizedBox(height: 10),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                hintText: '비밀번호',
              ),
            ),
            SizedBox(height: 20),
            RaisedButton(
              child: Text('로그인'),
              onPressed: () {
                // 로그인 버튼 클릭 시 동작할 코드 작성
              },
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 Lottie.asset 위젯을 사용하여 JSON 파일로 된 Lottie 애니메이션을 로고로 사용합니다. 애니메이션의 높이는 200으로 설정하였습니다. 이메일과 비밀번호 입력 필드는 TextField 위젯으로, 로그인 버튼은 RaisedButton 위젯으로 구현되었습니다.

Lottie 애니메이션 추가하기

Lottie 애니메이션을 사용하기 위해선 먼저 해당 애니메이션의 JSON 파일을 준비해야 합니다. 만약 Lottie Files에서 애니메이션을 다운로드하였다면, assets 폴더 아래에 해당 파일을 복사합니다. 그리고 pubspec.yaml 파일의 assets 섹션에 아래와 같이 경로를 추가합니다.

flutter:
  assets:
    - assets/animations/login_animation.json

마무리

위 예제를 통해 플러터의 Lottie 패키지를 사용하여 로그인 화면에 애니메이션을 적용하는 방법을 알아보았습니다. Lottie를 활용하면 더욱 동적이고 매력적인 UI를 구현할 수 있습니다. 프로젝트에 애니메이션을 적용해서 사용자 경험을 향상시켜보세요!