플러터:개요
1. 플러터:VSCode
2. 플러터:안드로이드 스튜디오
플러터:실행
플러터:개념 잡기
권한 사용
1. 플러터:마이크 입력
위젯
플러터:DB연결
1. 플러터:Firebase(미완)
2. 플러터:MySQL(미완)
디자인
1. 플러터:테마
2. 플러터:앱바
플러터:배포
1. 플러터:배포(안드로이드)(미완)
플러터:참고자료
플러터:위젯
1. 플러터:공간배치용 위젯
플러터:구글 AdMob(미완)
플러터:라이브러리
1. 플러터:logger

Flutter Slider 개요

슬라이더(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: 값이 변경될 때마다 호출되는 콜백 함수

전체 예제

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

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

그래프와의 연동

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

예)

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

기본 흐름:

슬라이더 입력 → 상태 변경 → 그래프 다시 그리기

함께 보면 좋은 문서

요약

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