[flutter] 플러터 Lottie와 캘리그라피 폰트의 조합

05 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱 개발에서 Lottie와 캘리그라피 폰트를 함께 사용하는 방법에 대해 알아보겠습니다.

1. Lottie란?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식의 파일을 사용하여 벡터 애니메이션을 쉽게 구현할 수 있습니다. 이 라이브러리를 사용하면 디자이너가 만든 애니메이션을 손쉽게 앱에 통합할 수 있습니다.

2. 캘리그라피 폰트란?

캘리그라피 폰트는 손글씨 스타일의 폰트로, 고급스러움과 우아함을 나타내기에 적합합니다. 이 폰트는 앱의 디자인에 독특하고 세련된 느낌을 줄 수 있습니다.

3. Lottie와 캘리그라피 폰트 결합하기

Lottie와 캘리그라피 폰트를 함께 사용하기 위해서는 다음의 단계를 따라야 합니다.

단계 1: Lottie 패키지 추가

pubspec.yaml 파일에 아래의 의존성을 추가합니다.

dependencies:
  lottie: ^1.0.1

단계 2: Lottie 애니메이션 추가

Lottie 애니메이션 파일(.json)을 프로젝트에 추가합니다. 필요한 경우, Lottie Editor를 사용하여 애니메이션을 디자인하고 내보낼 수 있습니다.

단계 3: 폰트 추가

폰트 파일(.ttf 또는 .otf)을 프로젝트에 추가합니다. 캘리그라피 폰트 파일을 사용하려면, 해당 폰트 파일을 찾아서 프로젝트에 포함시켜야 합니다.

단계 4: 캘리그라피 폰트 적용

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: 'Lottie with Calligraphy Font',
      theme: ThemeData(
        // 캘리그라피 폰트 적용
        fontFamily: 'CalligraphyFont',
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lottie with Calligraphy Font'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Lottie 애니메이션 추가
              Container(
                height: 200,
                width: 200,
                child: Lottie.asset('assets/animation.json'),
              ),
              Text(
                '안녕하세요',
                style: TextStyle(
                  fontSize: 24,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

위의 코드에서 fontFamily 항목을 캘리그라피 폰트의 이름으로 변경하여 캘리그라피 폰트를 앱에 적용할 수 있습니다.

4. 마무리

이제 플러터 앱에서 Lottie와 캘리그라피 폰트를 함께 사용하는 방법에 대해 알아보았습니다. 이 조합을 통해 앱에 멋진 애니메이션과 고급스러운 폰트를 적용하여 사용자에게 더욱 흥미로운 경험을 제공할 수 있습니다.