[flutter] 플러터 Lottie와 폰트 선택의 연동

05 Dec 2023

flutter

플러터(Flutter)는 모바일 애플리케이션 개발을 위한 인기있는 프레임워크입니다. Lottie는 Adobe에서 개발된 애프터 이펙트 애니메이션을 사용할 수 있는 오픈 소스 라이브러리입니다. 이번 글에서는 플러터 앱에서 Lottie 애니메이션을 사용하고, 폰트 선택과 연동하는 방법에 대해 알아보겠습니다.

Lottie 애니메이션 추가하기

먼저, 플러터 프로젝트에 Lottie 애니메이션을 추가해야 합니다. 이를 위해 lottie 패키지를 pubspec.yaml 파일에 추가해주어야 합니다. 아래는 pubspec.yaml 파일의 예시입니다.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.1.0

패키지를 추가한 후에는 pub get 명령을 실행하여 패키지를 다운로드 받아야 합니다.

Lottie 애니메이션 사용하기

Lottie 애니메이션을 사용하기 위해서는 다음과 같은 단계를 거쳐야 합니다.

Lottie 파일 가져오기
Lottie 파일을 플러터 앱에 추가하기
Lottie 애니메이션 컨트롤하기

1. Lottie 파일 가져오기

Lottie 파일은 JSON 형식으로 제공됩니다. 이 파일은 웹에서 다운로드하거나 직접 구현하여 사용할 수 있습니다. Lottie 애니메이션은 Adobe After Effects 소프트웨어에서 만들고 .json 형식으로 내보낼 수 있습니다.

2. Lottie 파일을 플러터 앱에 추가하기

Lottie 애니메이션 파일을 플러터 앱에 추가하기 위해서는 FlutterLogo 위젯 대신 Lottie.asset() 위젯을 사용해야 합니다. Lottie.asset() 위젯은 Lottie 파일의 경로를 인수로 받아 해당 애니메이션을 표시합니다. 아래는 예시 코드입니다.

Lottie.asset(
  '<경로/파일이름.json>',
  width: 200,
  height: 200,
)

3. Lottie 애니메이션 컨트롤하기

Lottie 애니메이션을 컨트롤하기 위해서는 LottieController를 사용해야 합니다. LottieController는 Lottie 애니메이션의 재생, 일시정지, 반복 등을 제어할 수 있는 다양한 메소드를 제공합니다. 아래는 예시 코드입니다.

final controller = AnimationController(vsync: this)
Lottie.asset(
  '<경로/파일이름.json>',
  width: 200,
  height: 200,
  controller: controller,
)
controller.forward(); // 애니메이션 재생
controller.stop(); // 애니메이션 정지

폰트 선택과 연동하기

플러터에서는 다양한 폰트를 사용할 수 있습니다. 폰트 선택은 앱의 디자인과 사용자 경험에 중요한 역할을 합니다. 플러터에서 폰트 선택 및 연동을 하기 위해서는 아래와 같은 절차를 따를 수 있습니다.

폰트 파일 가져오기
폰트 파일을 플러터 앱에 추가하기
폰트 사용하기

1. 폰트 파일 가져오기

폰트 파일은 ttf 또는 otf와 같은 확장자를 가집니다. 이 파일은 웹에서 다운로드할 수도 있고, 기존에 사용하던 폰트 파일을 이용할 수도 있습니다.

2. 폰트 파일을 플러터 앱에 추가하기

폰트 파일을 플러터 앱에 추가하려면 pubspec.yaml 파일에 폰트를 추가해야 합니다. 아래는 pubspec.yaml 파일에 폰트를 추가하는 예시입니다.

flutter:
  fonts:
    - family: <폰트 패밀리 이름>
      fonts:
        - asset: <폰트 파일 경로>

3. 폰트 사용하기

폰트를 사용하기 위해서는 TextStyle를 사용하여 해당 폰트를 적용해야 합니다. 아래는 예시 코드입니다.

Text(
  '폰트 적용 예시',
  style: TextStyle(
    fontFamily: '<폰트 패밀리 이름>',
  ),
)

결론

이번 글에서는 플러터 앱에서 Lottie 애니메이션과 폰트 선택을 연동하는 방법을 알아보았습니다. Lottie 애니메이션을 통해 앱에 동적이고 멋진 애니메이션을 추가하고, 폰트 선택을 통해 디자인에 더욱 다양한 스타일을 부여할 수 있습니다. 충분한 연습과 실험을 통해 플러터의 다양한 기능을 익히고, 본인만의 앱을 개발해보시기 바랍니다.