플러터:슬라이더 - 편집 역사

Sam: /* 전체 예제 */

2026-01-07T02:08:31Z

전체 예제

@@ 77번째 줄: / 77번째 줄: @@
 <syntaxhighlight lang="dart">
 import 'package:flutter/material.dart';
 class SliderExample extends StatefulWidget {
    @override
    State<SliderExample> createState() => _SliderExampleState();
@@ 115번째 줄: / 132번째 줄: @@
+   }
+}
 </syntaxhighlight>

2025년 11월 25일 (화) 07:11에 Sam님의 편집

2025-11-25T07:11:21Z

@@ 1번째 줄: / 1번째 줄: @@
 {{플러터}}
-= Flutter Slider 개요 =
+= 개요 =
-'''슬라이더(Slider)'''는 Flutter에서 연속적인 값(0~100, 음량, 밝기 등)을 입력할 때 사용하는 기본 위젯이다.
+슬라이더(Slider)는 Flutter에서 연속적인 값(0~100, 음량, 밝기 등)을 입력할 때 사용하는 기본 위젯이다.
 사용자가 막대를 좌우로 움직이면 값이 변경되고, 변경된 값은 onChanged 콜백을 통해 즉시 전달된다.
-== 특징 ==
+=== 특징 ===
-* 연속적인 범위의 값을 입력할 때 사용
+* 연속적인 범위의 값을 입력할 때 사용.
-* 최소값(min)과 최대값(max)을 지정 가능
+* 최소값(min)과 최대값(max)을 지정 가능.
-* 실시간으로 값 변화를 감지할 수 있음
+* 실시간으로 값 변화를 감지할 수 있음.
-* UI 업데이트와 결합하여 그래프, 센서값 표시 등에 활용 가능
+* UI 업데이트와 결합하여 그래프, 센서값 표시 등에 활용 가능.
 = 기본 사용법 =
@@ 33번째 줄: / 32번째 줄: @@
 </syntaxhighlight>
-== 코드 설명 ==
+== 속성 설명 ==
-* <code>value</code>: 현재 값
+{| class="wikitable"
-* <code>min</code> / <code>max</code>: 범위 설정
+|+
-* <code>onChanged</code>: 값이 변경될 때마다 호출되는 콜백 함수
+!속성
-----
+onChangeEnd: (v) => print("종료: $v"),
 = 전체 예제 =
@@ 85번째 줄: / 116번째 줄: @@
+}
 </syntaxhighlight>

Sam: 새 문서: {{플러터}} = Flutter Slider 개요 = '''슬라이더(Slider)'''는 Flutter에서 연속적인 값(0~100, 음량, 밝기 등)을 입력할 때 사용하는 기본 위젯이다. 사용자가 막대를 좌우로 움직이면 값이 변경되고, 변경된 값은 onChanged 콜백을 통해 즉시 전달된다. == 특징 == * 연속적인 범위의 값을 입력할 때 사용 * 최소값(min)과 최대값(max)을 지정 가능 * 실시간으로 값 변화를 감지할 수 있음...

2025-11-25T07:06:48Z

새 문서: {{플러터}} = Flutter Slider 개요 = '''슬라이더(Slider)'''는 Flutter에서 연속적인 값(0~100, 음량, 밝기 등)을 입력할 때 사용하는 기본 위젯이다. 사용자가 막대를 좌우로 움직이면 값이 변경되고, 변경된 값은 onChanged 콜백을 통해 즉시 전달된다. == 특징 == * 연속적인 범위의 값을 입력할 때 사용 * 최소값(min)과 최대값(max)을 지정 가능 * 실시간으로 값 변화를 감지할 수 있음...

새 문서

{{플러터}}

= 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 갱신을 이해하는 좋은 예제
* 실시간 그래프, 센서값 등 다양한 기능의 기초가 됨