플러터:슬라이더 편집하기

{{플러터}}

= 개요 =
슬라이더(Slider)는 Flutter에서 연속적인 값(0~100, 음량, 밝기 등)을 입력할 때 사용하는 기본 위젯이다.

사용자가 막대를 좌우로 움직이면 값이 변경되고, 변경된 값은 onChanged 콜백을 통해 즉시 전달된다.

=== 특징 ===
* 연속적인 범위의 값을 입력할 때 사용.
* 최소값(min)과 최대값(max)을 지정 가능.
* 실시간으로 값 변화를 감지할 수 있음.
* UI 업데이트와 결합하여 그래프, 센서값 표시 등에 활용 가능.

= 기본 사용법 =

== 최소 코드 예시 ==
다음은 가장 단순한 형태의 슬라이더 예제이다.

<syntaxhighlight lang="dart">
double value = 50;

Slider(
  value: value,
  min: 0,
  max: 100,
  onChanged: (newValue) {
    setState(() {
      value = newValue;
    });
  },
);
</syntaxhighlight>

== 속성 설명 ==
{| class="wikitable"
|+
!속성
!설명
!비고
|-
|<code>value</code>
|현재 값
|
|-
|<code>min</code> / <code>max</code>
|범위 설정
|
|-
|<code>onChanged</code>
|값이 변경될 때마다 호출되는 콜백 함수
|
|-
|divisions 
|슬라이더를 일정 간격으로 나누는 옵션.
|divisions: 10
→ 0~100 범위라면 0,10,20,30 … 100 단위로 움직임.
|-
|label
|슬라이더를 터치할 때 보여줄 툴팁(label).
|label: value.toStringAsFixed(1)
|-
|onChangeStart 
|사용자가 슬라이더를 처음 터치할 때 호출.
| rowspan="2" |onChangeStart: (v) => print("시작: $v"),

onChangeEnd: (v) => print("종료: $v"),
|-
|onChangeEnd 
|사용자가 손을 떼는 순간 호출.
|}
이외 슬라이더 색상 등 굉장히 많은 옵션이 있다.

= 전체 예제 =

다음은 값 표시 + 슬라이더 입력이 포함된 완성 예제이다.

<syntaxhighlight lang="dart">
import 'package:flutter/material.dart';

class SliderExample extends StatefulWidget {
  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double value = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("슬라이더 예제")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "현재 값: ${value.toStringAsFixed(1)}",
            style: const TextStyle(fontSize: 24),
          ),

          Slider(
            value: value,
            min: 0,
            max: 100,
            divisions: 100,
            label: value.toStringAsFixed(1),
            onChanged: (double newValue) {
              setState(() {
                value = newValue;
              });
            },
          ),
        ],
      ),
    );
  }
}
</syntaxhighlight>