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

{{플러터}}

= Flutter Slider 개요 =
'''슬라이더(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>

== 코드 설명 ==
* <code>value</code>: 현재 값
* <code>min</code> / <code>max</code>: 범위 설정
* <code>onChanged</code>: 값이 변경될 때마다 호출되는 콜백 함수

----

= 전체 예제 =

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

<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>

----

= 그래프와의 연동 =
슬라이더를 이용해 그래프 값을 실시간으로 변경할 수 있다.

예)
* 슬라이더 값 변경 → 상태 업데이트(setState)
* 값 변경 → 그래프의 Y값으로 반영
* UI 자동 갱신 → 실시간 변화 확인 가능

기본 흐름:

<syntaxhighlight lang="text">
슬라이더 입력 → 상태 변경 → 그래프 다시 그리기
</syntaxhighlight>

----

= 함께 보면 좋은 문서 =
* [[Flutter 그래프 그리기 (fl_chart)]]
* [[Flutter 실시간 센서 데이터 처리]]
* [[StatefulWidget 이해하기]]

----

= 요약 =
* 슬라이더는 Flutter에서 값 입력의 기본 도구
* 상태 변화와 UI 갱신을 이해하는 좋은 예제
* 실시간 그래프, 센서값 등 다양한 기능의 기초가 됨