[flutter] 플러터 Lottie와 비디오 플레이어의 결합

05 Dec 2023

flutter

플러터(Flutter)는 UI를 개발하기 위한 크로스 플랫폼 프레임워크로, 다양한 기능을 제공합니다. 이 중에서 Lottie와 비디오 플레이어를 함께 사용해보는 방법을 알아보겠습니다.

Lottie란?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리로, JSON 형식의 애니메이션 파일을 사용하여 애니메이션을 구현할 수 있습니다. Flutter에서는 lottie_flutter 패키지를 사용하여 Lottie 애니메이션을 표시할 수 있습니다.

비디오 플레이어 추가하기

플러터에서 비디오 재생을 위해서는 비디오 플레이어를 추가해야 합니다. 비디오 플레이어를 추가하는 가장 간단한 방법은 video_player 패키지를 사용하는 것입니다. video_player 패키지를 pubspec.yaml 파일에 추가하고, Flutter 화면에 비디오 플레이어를 추가하는 코드를 작성합니다.

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

class VideoScreen extends StatefulWidget {
  @override
  _VideoScreenState createState() => _VideoScreenState();
}

class _VideoScreenState extends State<VideoScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
        'https://example.com/video.mp4'); // 비디오 URL 입력
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true); // 루프 재생 설정
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: FutureBuilder(
        future: _initializeVideoPlayerFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

Lottie와 비디오 플레이어 결합하기

Lottie와 비디오 플레이어를 함께 사용하기 위해서는 lottie_flutter 패키지와 video_player 패키지를 함께 사용해야 합니다. 비디오 플레이어 위에 Lottie 애니메이션을 배치하고, 비디오 재생 상태에 따라 Lottie 애니메이션의 재생을 제어하는 코드를 작성합니다.

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

class VideoScreen extends StatefulWidget {
  @override
  _VideoScreenState createState() => _VideoScreenState();
}

class _VideoScreenState extends State<VideoScreen> {
  VideoPlayerController _controller;
  Future<void> _initializeVideoPlayerFuture;
  bool _showAnimation = true;

  @override
  void initState() {
    _controller = VideoPlayerController.network(
        'https://example.com/video.mp4'); // 비디오 URL 입력
    _initializeVideoPlayerFuture = _controller.initialize();
    _controller.setLooping(true); // 루프 재생 설정
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player with Lottie'),
      ),
      body: Stack(
        children: [
          FutureBuilder(
            future: _initializeVideoPlayerFuture,
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                );
              } else {
                return Center(
                  child: CircularProgressIndicator(),
                );
              }
            },
          ),
          if (_showAnimation)
            Positioned.fill(
              child: Lottie.asset(
                'assets/animations/loading.json', // Lottie 애니메이션 파일 경로 입력
                fit: BoxFit.cover,
              ),
            ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

위의 코드에서 Lottie.asset() 메소드의 첫 번째 파라미터로 Lottie 애니메이션 파일의 경로를 입력해야 합니다. 애니메이션 파일은 assets 폴더에 저장되어 있어야 합니다.

결론

Flutter에서 플러터 Lottie와 비디오 플레이어를 함께 사용하는 방법에 대해 알아보았습니다. 비디오 플레이어는 video_player 패키지를, Lottie 애니메이션은 lottie_flutter 패키지를 사용하여 간단하게 구현할 수 있습니다. 이를 활용하여 다양한 동적 UI를 구현해보세요.