[flutter] 플러터에서 훅(hook)을 활용하여 비디오 재생 기능 추가하기

14 Dec 2023

flutter

플러터는 Google에서 개발한 프레임워크로, 다양한 플랫폼에서 원하는 앱을 개발할 수 있는 강력한 도구입니다. 이번에는 플러터에서 훅(Hook)을 활용하여 비디오 재생 기능을 추가하는 방법에 대해 알아보겠습니다.

1. 플러터 훅(Hook)이란?

훅(Hook)은 플러터와 같은 프레임워크에서 상태 관리와 같은 기능을 보다 간결하고 효율적으로 작성할 수 있게 해주는 도구입니다. flutter_hooks 라이브러리를 활용하면 함수형 컴포넌트에서도 상태를 관리할 수 있어, 코드를 간결하게 작성할 수 있습니다.

2. 비디오 재생 기능 추가하기

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

void main() => runApp(VideoApp());

class VideoApp extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final videoPlayerController = useVideoPlayerController('https://www.example.com/video.mp4');
    return Scaffold(
      body: Center(
        child: videoPlayerController.value.initialized
            ? AspectRatio(
                aspectRatio: videoPlayerController.value.aspectRatio,
                child: VideoPlayer(videoPlayerController),
              )
            : CircularProgressIndicator(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          videoPlayerController.value.isPlaying ? videoPlayerController.pause() : videoPlayerController.play();
        },
        child: Icon(
          videoPlayerController.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

위 코드에서는 화면 중앙에 동영상을 재생하고, 플로팅 액션 버튼을 통해 재생/일시정지 기능을 추가했습니다. 플러터 훅을 사용하여 비디오 플레이어 컨트롤러를 만들고, 이를 활용하여 UI를 작성하였습니다.

훅을 활용하면 상태 관리와 UI를 보다 간결하게 코드로 작성할 수 있으며, 앱의 성능을 향상시킬 수 있습니다.

플러터 훅을 활용하여 비디오 재생 기능을 추가하는 방법에 대해 알아보았습니다. 향후 플러터 앱을 개발할 때, 훅을 적극적으로 활용하여 보다 효율적인 코드 작성에 도움이 되길 바랍니다.

참고 문헌: