[flutter] 플러터 커퍼티노 스테퍼를 이용한 동영상 밝기 조절 기능 구현하기

05 Dec 2023

flutter

플러터는 Google에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크입니다. 이번에는 플러터의 Cupertino 스테퍼를 이용하여 동영상의 밝기를 조절하는 기능을 구현하는 방법을 알아보겠습니다.

1. 플러터 프로젝트 생성하기

플러터 개발을 위해 먼저 플러터 프로젝트를 생성해야 합니다. 터미널 또는 커맨드 프롬프트에서 다음 명령어를 실행하여 프로젝트를 생성합니다.

flutter create brightness_control

2. 필요한 패키지 추가하기

이번 예제에서는 비디오 재생 및 제어를 위해 video_player 패키지와 iOS 형식의 스테퍼를 사용하기 위해 cupertino_icons 패키지가 필요합니다. pubspec.yaml 파일의 dependencies 부분에 다음과 같이 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  video_player: ^0.10.9+2

설정을 마친 후에는 터미널에서 flutter packages get 명령어를 실행하여 패키지를 다운로드하고 프로젝트에 적용합니다.

3. 동영상 밝기 조절 기능 구현하기

3.1. 필요한 파일 import하기

다음과 같이 main.dart 파일 상단에 필요한 파일을 import 해줍니다.

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

3.2. 스테퍼 위젯 추가하기

플러터에서는 iOS의 디자인을 재현하기 위해 Cupertino 디자인을 제공합니다. 이번 예제에서도 Cupertino 스타일의 스테퍼 위젯을 사용할 것입니다. 다음 코드를 main.dart 파일의 MyHomePage 위젯에 추가해주세요.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late VideoPlayerController _controller;
  double _brightness = 1.0;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text(widget.title),
      ),
      body: _controller.value.isInitialized
          ? Stack(
              children: [
                AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                ),
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: CupertinoSlider(
                      value: _brightness,
                      min: 0.0,
                      max: 1.0,
                      onChanged: (value) {
                        setState(() {
                          _brightness = value;
                          _controller.setVolume(_brightness);
                        });
                      },
                    ),
                  ),
                ),
              ],
            )
          : Center(
              child: CircularProgressIndicator(),
            ),
    );
  }
}

3.3. 동영상 URL 변경하기

위 코드에서 ‘https://example.com/path/to/video.mp4’ 부분을 실제 동영상 파일의 URL로 변경해주어야 합니다.

4. 애플리케이션 실행하기

위의 코드를 모두 작성하였다면, 애플리케이션을 실행해보세요. 동영상이 재생되며, 스테퍼를 조작하면 동영상의 밝기가 조절됩니다.

이번 포스트에서는 플러터의 Cupertino 스테퍼를 이용하여 동영상의 밝기를 조절하는 기능을 구현하는 방법을 알아보았습니다. 플러터의 다양한 위젯을 활용하여 더 멋진 기능을 구현해보세요!

참고 자료

밝기 조절 기능과 관련된 자세한 내용은 위의 링크를 참고하세요.