[flutter] 플러터 Lottie로 서버와의 통신 상태 표시하기

05 Dec 2023

flutter

서버와의 통신은 모바일 앱 개발에서 중요한 부분입니다. 사용자에게 서버와의 통신 상태를 시각적으로 표시하는 것은 사용성과 UX 측면에서 매우 중요합니다. 이번 글에서는 플러터 프레임워크를 사용하여 Lottie 애니메이션을 이용해 서버와의 통신 상태를 표시하는 방법에 대해 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식의 파일로 디자인된 애니메이션을 로드하여 화면에 렌더링할 수 있습니다. 애니메이션의 프레임 단위로 제어 가능하며, 개발자들은 Lottie를 통해 고품질의 애니메이션을 손쉽게 구현할 수 있습니다.

플러터에서 Lottie 사용하기

플러터에서 Lottie를 사용하기 위해서는 flutter_lottie 패키지를 프로젝트에 추가해야 합니다. 먼저, pubspec.yaml 파일에서 아래와 같이 의존성을 추가해주세요:

dependencies:
  flutter_lottie: ^1.0.0

의존성을 추가한 후, 터미널에서 flutter pub get 명령을 실행하여 패키지를 설치하세요.

통신 상태 표시하기

이제 Lottie를 사용하여 서버와의 통신 상태를 표시하는 예제를 살펴보겠습니다. 먼저, 앱 화면에 Lottie 애니메이션을 표시할 LottieAnimation 위젯을 생성합니다:

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

class LottieAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.center,
      child: Lottie.asset(
        'assets/loading_animation.json',
        width: 200,
        height: 200,
        fit: BoxFit.cover,
      ),
    );
  }
}

위 코드에서 Lottie.asset 위젯은 assets/loading_animation.json 파일에 저장된 애니메이션을 로드하여 화면에 표시합니다. 이때 애니메이션의 크기는 width와 height 속성으로 조절할 수 있습니다.

서버와의 통신이 진행 중일 때는 LottieAnimation을 화면에 표시하고, 통신이 완료되면 다른 컨텐츠를 표시하는 방식으로 구현할 수 있습니다.

import 'package:flutter/material.dart';

class CommunicationScreen extends StatefulWidget {
  @override
  _CommunicationScreenState createState() => _CommunicationScreenState();
}

class _CommunicationScreenState extends State<CommunicationScreen> {
  bool _isLoading = false;

  void _startCommunication() {
    setState(() {
      _isLoading = true;
    });

    // 서버와의 통신 로직 구현

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Communication Example'),
      ),
      body: Center(
        child: _isLoading ? LottieAnimation() : Text('통신이 완료되었습니다.'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _startCommunication,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

위 코드에서 _isLoading 변수를 사용하여 통신 상태를 관리하고, _startCommunication 함수에서 통신이 진행되는 동안 _isLoading 값을 변경합니다. LottieAnimation은 _isLoading 값에 따라 화면에 표시되거나 숨겨집니다.

통신이 완료되면 Text 위젯을 화면에 표시하여 통신이 완료되었음을 알려줍니다. 또한, 플로팅 액션 버튼을 누르면 _startCommunication 함수가 호출되어 통신이 시작됩니다.

결론

플러터와 Lottie를 함께 사용하여 서버와의 통신 상태를 시각적으로 표시할 수 있습니다. Lottie를 사용하면 고품질의 애니메이션을 손쉽게 구현할 수 있으며, 사용자에게 통신 진행 상태를 잘 전달할 수 있습니다.

더 자세한 정보를 원하시면 Lottie GitHub 저장소를 참고하세요.