플러터:슬라이더

틀:플러터 Dart:개요 플러터에 대한 지식 분류

1. 플러터:개요
   1. 플러터:VSCode
2. 플러터:실행
3. 개념 잡기
   1. 플러터:화면 하나 만들기
   2. 플러터:변하는 화면(StatefulWidget)
   3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
   4. 플러터:화면 전환(Drawer)
   5. 플러터:키보드 입력
   6. 플러터:슬라이더
   7. 플러터:그래프 그리기(fl chart)
   8. 플러터:데이터 저장(간단한 데이터)
   9. 플러터:인증(Firebase 인증)
   10. 플러터:인증(OAuth2)
4. 권한 사용
   1. 플러터:마이크 입력
5. 위젯
   1. 플러터:아이콘
   2. 플러터:레이아웃 계열 위젯
   3. 플러터:네비게이션 계열 위젯
   4. 플러터:버튼
   5. 플러터:상태관리
6. 플러터:DB연결
   1. 플러터:Firebase
   2. 플러터:MySQL
7. 디자인
   1. 플러터:테마
   2. 플러터:앱바
   3. 플러터:버튼
8. 플러터:배포
9. 플러터:참고자료
10. 플러터:위젯
    1. 플러터:공간배치용 위젯
11. 플러터:라이브러리
    1. 플러터:logger

개요

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

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

특징

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

기본 사용법

최소 코드 예시

다음은 가장 단순한 형태의 슬라이더 예제이다.

double value = 50;

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

속성 설명

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

이외 슬라이더 색상 등 굉장히 많은 옵션이 있다.

전체 예제

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

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;
              });
            },
          ),
        ],
      ),
    );
  }
}