Slider 이해

Flutter에서 Slider는 사용자가 특정 범위 내에서 값을 선택할 수 있도록 하는 위젯입니다. 앱 설정, 게임, 음악 플레이어 등 다양한 곳에서 활용됩니다.

기본 형태

Slider(
  value: _currentSliderValue, // 현재 슬라이더 값
  min: 0.0, // 최소값
  max: 10.0, // 최대값
  divisions: 10, // 구간 수
  label: _currentSliderValue.toString(), // 슬라이더 값 표시
 
  onChanged: (double newValue) {
    setState(() {
      _currentSliderValue = newValue;
    });
  },
)

각 속성 설명

• value: 현재 슬라이더의 값(위치)을 나타냅니다. int나 double값이 들어가야함. value 값에 정수를 넣어 놓으면, 아무리 마우스를 긁어대도 슬라이더는 변하지 않는다. 마우스로 슬라이더를 긁어 발생한 값, 즉 onChanged함수에서의 value 값을 Slider의 value 값으로 전달해야 긁는대로 슬라이더도 움직인다.

• min: 슬라이더의 최소값을 설정합니다.

• max: 슬라이더의 최대값을 설정합니다.

• divisions: 슬라이더를 나누는 구간 수를 설정합니다.

• label: 슬라이더 위에 표시되는 값을 설정합니다.String 값이 들어가야함

• onChanged: 슬라이더 값이 변경될 때마다 호출되는 콜백 함수입니다.

import 'package:flutter/material.dart';

class MySlider extends StatefulWidget {
  @override
  _MySliderState createState() => _MySliderState();
}

class _MySliderState   
 extends State<MySlider> {
  double _currentSliderValue = 50;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentSliderValue,
      min: 0,
      max: 100,
      divisions: 10,
      label: _currentSliderValue.toString(),
      
      onChanged: (double newValue) {
        setState(() {
          _currentSliderValue = newValue;
        });
      },
    );
  }
}

위 코드는 0부터 100까지의 값을 가진 슬라이더를 생성하며, 슬라이더 값이 변경될 때마다 화면을 업데이트합니다.

추가적인 설정

activeColor: 슬라이더의 활성화된 부분의 색상을 설정합니다.
inactiveColor: 슬라이더의 비활성화된 부분의 색상을 설정합니다.
thumbColor: 슬라이더의 손잡이 색상을 설정합니다.
semanticFormatterCallback: 슬라이더 값을 설명하는 텍스트를 반환하는 함수를 설정합니다.

활용 예시
밝기 조절: 슬라이더를 이용하여 화면 밝기를 조절할 수 있습니다.
볼륨 조절: 음악 플레이어에서 볼륨을 조절할 수 있습니다.
게임 난이도 조절: 게임의 난이도를 조절할 수 있습니다.
필터 강도 조절: 이미지 편집 앱에서 필터의 강도를 조절할 수 있습니다.

onChanged 함수의 심화이해

onChanged 함수의 정의

final ValueChanged<double>? onChanged;

ValueChanged 타입의 정의

typedef ValueChanged<T> = void Function(T value);

onChanged 의 해석

• onChanged는 ValueChanged 타입의 함수이고, double 값을 받을 수 있다.
  (onChanged 함수 정의에서 double 받으라고 지정됨)

• ValueChanged 타입은 제네릭 타입을 사용하여 value 값을 받고, 반환값이 없는 void 함수이다.

• ValueChanged 함수는 특정 이벤트 (ex. 슬라이더를 움직이거나)가 발생했을 때, 실행되는 콜백함수이다.