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

05 Dec 2023

flutter

개요

이번 글에서는 Flutter의 Cupertino 스테퍼를 이용하여 화면의 밝기를 조절하는 기능을 구현하는 방법에 대해 알아보겠습니다.

프로젝트 설정

프로젝트를 생성하고 Cupertino 패키지를 추가합니다. 이 공식 가이드를 참고하여 Flutter 개발 환경을 구축하세요.

import 'package:flutter/cupertino.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Brightness Slider',
      theme: CupertinoThemeData(
        primaryColor: CupertinoColors.activeGreen,
      ),
      home: BrightnessSlider(),
    );
  }
}

화면에 스테퍼 추가

밝기 조절을 위한 Cupertino 스테퍼를 화면에 추가합니다. BrightnessSlider 클래스를 만들고, StatefulWidget을 확장하여 Slider 위젯을 추가합니다.

class BrightnessSlider extends StatefulWidget {
  @override
  _BrightnessSliderState createState() => _BrightnessSliderState();
}

class _BrightnessSliderState extends State<BrightnessSlider> {
  double brightnessLevel = 0.5; // 초기 밝기 값

  void updateBrightness(double value) {
    setState(() {
      brightnessLevel = value;
    });
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Brightness Slider'),
      ),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Brightness Level: ${brightnessLevel.toStringAsFixed(2)}',
            ),
            SizedBox(height: 20),
            CupertinoSlider(
              value: brightnessLevel,
              min: 0,
              max: 1,
              onChanged: (value) {
                updateBrightness(value);
              },
            ),
          ],
        ),
      ),
    );
  }
}

스테퍼 값으로 밝기 조절하기

brightnessLevel 상태값을 사용하여 화면의 밝기를 조절하는 기능을 추가합니다.

import 'package:flutter/services.dart';

void updateBrightness(double value) {
  setState(() {
    brightnessLevel = value;
    SystemChrome.setBrightness(value);
  });
}

이제 앱을 실행하면 화면에 밝기 조절 슬라이더가 나타나고, 슬라이더를 움직이면 화면의 밝기가 조절됩니다.

결론

이번에는 Flutter의 Cupertino 스테퍼를 이용하여 화면의 밝기를 조절하는 기능을 구현하는 방법을 알아보았습니다. 스테퍼를 사용하여 간편하게 화면 밝기 조절 기능을 구현할 수 있으며, SystemChrome 클래스를 사용하여 실제로 밝기를 조절할 수 있습니다. 참고 코드를 통해 자신만의 밝기 조절 기능을 구현해 보세요.