[flutter] 플러터 커퍼티노 스테퍼를 이용한 비디오 품질 조절 기능 구현하기

05 Dec 2023

flutter

이번 포스트에서는 Flutter를 사용하여 비디오 플레이어에서 품질을 조절하는 기능을 구현하는 방법을 알아보겠습니다. 이를 위해 플러터의 커퍼티노 스테퍼 위젯을 사용할 것입니다.

커퍼티노 스테퍼 위젯

커퍼티노 스테퍼(의 iOS 버전)는 iOS 디자인 시스템에 맞는 플러터 위젯입니다. 이 위젯은 범위 내의 값을 선택하고 조절하는 기능을 제공합니다. 우리는 이 위젯을 사용하여 비디오 품질을 조절할 수 있습니다.

CupertinoStepper(
  value: qualityLevel, // 품질 레벨 값
  onChanged: (double newValue) {
    setState(() {
      qualityLevel = newValue;
    });
  },
  min: 0, // 최소 품질 레벨
  max: 10, // 최대 품질 레벨
  divisions: 10, // 품질 레벨의 개수
  step: 1, // 한 번에 조절되는 값
)

value: 현재 선택된 품질 레벨을 저장할 변수입니다.
onChanged: 스테퍼의 값을 변경할 때 호출되는 콜백 함수입니다. 이 함수는 새로운 값을 인자로 받아와서 상태를 업데이트합니다.
min과 max: 품질 레벨의 범위를 설정합니다.
divisions: 품질 레벨의 개수를 설정합니다.
step: 한 번에 조절되는 값의 크기를 설정합니다.

비디오 플레이어에 품질 조절 기능 추가하기

비디오 플레이어에 커퍼티노 스테퍼를 추가하여 품질 조절 기능을 구현해보겠습니다.

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  double qualityLevel = 5;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 비디오 플레이어 위젯
          VideoWidget(),
          SizedBox(height: 16),
          // 커퍼티노 스테퍼 위젯
          CupertinoStepper(
            value: qualityLevel,
            onChanged: (double newValue) {
              setState(() {
                qualityLevel = newValue;
              });
            },
            min: 0,
            max: 10,
            divisions: 10,
            step: 1,
          ),
          // 품질 레벨 텍스트 표시
          Text('Quality Level: $qualityLevel'),
        ],
      ),
    );
  }
}

이제 비디오 플레이어 화면에 품질 조절을 위한 커퍼티노 스테퍼가 추가되었습니다. 사용자는 스테퍼를 조정하여 원하는 품질 레벨을 선택할 수 있습니다. 선택된 품질 레벨은 텍스트로 나타나며, 매번 스테퍼가 조정될 때마다 qualityLevel 변수가 업데이트됩니다.

마무리

이번 포스트에서는 플러터 커퍼티노 스테퍼를 사용하여 비디오 품질 조절 기능을 구현하는 방법을 알아보았습니다. 이러한 기능을 통해 사용자들은 비디오 플레이어에서 원하는 품질을 선택할 수 있게 됩니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참조하세요.