[flutter] 플러터 shimmer를 활용한 앱의 동영상 플레이어 애니메이션

11 Dec 2023

flutter

이번 포스트에서는 플러터를 사용하여 동영상 플레이어에 적용할 수 있는 Shimmer 애니메이션을 소개하려고 합니다. Shimmer 애니메이션은 사용자의 주목을 끌기에 적합한 애니메이션 기술로, 콘텐츠가 로딩 중일 때 화면 상에서 깜빡거리는 효과를 제공하여 사용자가 대기하는 동안 눈길을 끌 수 있습니다. 이를 활용하여 동영상이 로딩 중일 때 사용자들에게 시각적인 피드백을 제공할 수 있습니다.

Shimmer 애니메이션의 기본적인 사용법

플러터에서 Shimmer 애니메이션을 사용하기 위해서는 shimmer 패키지를 설치해야 합니다. pubspec.yaml 파일에 아래와 같이 패키지를 추가합니다.

dependencies:
  shimmer: ^2.0.0

Shimmer 애니메이션을 적용하려는 위젯의 주변에 Shimmer.fromColors() 위젯을 사용하여 애니메이션을 적용할 수 있습니다.

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

class VideoPlayer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Shimmer.fromColors(
      baseColor: Colors.grey[300],
      highlightColor: Colors.grey[100],
      child: VideoPlayerWidget(),
    );
  }
}

위 코드는 VideoPlayer 위젯 내부에 VideoPlayerWidget을 감싸어 Shimmer 애니메이션을 적용한 예시입니다.

동영상 플레이어에 Shimmer 애니메이션 적용하기

플러터에서 동영상 플레이어를 구현할 때 Shimmer 애니메이션을 사용하여 로딩 중에 시각적인 효과를 추가할 수 있습니다. 동영상 플레이어를 구성하는 위젯 내부에 Shimmer 애니메이션을 추가하여 로딩 중일 때 사용자에게 시각적인 피드백을 제공할 수 있습니다.

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

class VideoPlayerWidget extends StatefulWidget {
  @override
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4')
      ..initialize().then((_) {
        setState(() {}); // 화면 갱신
      });
  }

  @override
  Widget build(BuildContext context) {
    if (_controller.value.initialized) {
      return AspectRatio(
        aspectRatio: _controller.value.aspectRatio,
        child: VideoPlayer(_controller),
      );
    } else {
      return Shimmer.fromColors(
        baseColor: Colors.grey[300],
        highlightColor: Colors.grey[100],
        child: Container(
          color: Colors.grey[300],
        ),
      );
    }
  }

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

위 코드에서는 Shimmer 애니메이션을 적용한 동영상 플레이어 위젯을 구현했습니다. 동영상이 로딩 중일 때는 Shimmer 애니메이션이, 로딩이 완료된 후에는 실제 동영상이 렌더링되도록 구성되어 있습니다.

Shimmer 애니메이션을 활용하여 동영상 플레이어에 시각적인 효과를 추가할 수 있습니다.

이제 플러터에서 Shimmer 애니메이션을 사용하여 동영상 플레이어에 시각적인 효과를 추가할 수 있게 되었습니다. Shimmer 애니메이션을 활용하여 사용자들에게 동영상 로딩 중에도 시간을 기다리는 동안에도 시각적인 피드백을 제공할 수 있으며, 이를 통해 사용자 경험을 향상시킬 수 있습니다.

플러터에서 Shimmer 애니메이션을 통해 동영상 플레이어에 적용한 예시는 여기에서 확인할 수 있습니다.