[flutter] 플러터 ProgressIndicator를 사용하여 영상 재생 진행 상태를 표시하는 방법은?

20 Dec 2023

flutter

영상을 재생하는 동안 진행 상태를 시각적으로 표시하기 위해서, 플러터의 ProgressIndicator 위젯을 사용할 수 있습니다. 이 위젯은 진행 바나 원형 프로그래스 바와 같은 형태의 진행 상태 표시를 제공합니다.

아래는 ProgressIndicator를 사용하여 영상의 재생 진행 상태를 표시하는 간단한 방법입니다:

import 'package:flutter/material.dart';

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  bool _isPlaying = false;
  late VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'https://www.example.com/path-to-your-video.mp4')
      ..initialize().then((_) {
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : CircularProgressIndicator(), // ProgressIndicator 사용
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _isPlaying
                ? _controller.pause()
                : _controller.play(); // 영상 재생 상태에 따라 play 또는 pause
            _isPlaying = !_isPlaying;
          });
        },
        child: Icon(
          _isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }

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

이렇게 하면 ProgressIndicator를 사용하여 영상이 초기화될 때까지 진행 바가 표시되고, 영상이 준비되면 영상 플레이어로 전환됩니다.

더 나은 사용자 경험을 위해 영상의 재생 상태를 나타내는 프로그래스 바를 함께 사용하여 사용자에게 진행 상태를 시각적으로 표시할 수 있습니다.

이것은 플러터에서 영상을 재생하면서 ProgressIndicator를 사용하여 영상의 진행 상태를 표시하는 간단하고 효과적인 방법입니다.

참고: