[ Flutter Widget ] 플러터 기본위젯 - Slider

Flutter 기본 위젯 - Slider 위젯

 

1. Slider란?

• Slider는 Flutter에서 사용자가 연속적인 값 범위 중에서 하나의 값을 선택할 수 있도록 해주는 슬라이더 컨트롤입니다. 사용자는 슬라이더의 Thumb를 드래그하거나 터치하여 값을 변경할 수 있습니다.

2. Slider의 특징

1. 연속적인 값 선택
   • min에서 max 사이의 연속적인 값을 선택 가능.
2. 사용자 피드백 제공
   • 값 변경 시 즉각적인 피드백.
3. 커스터마이징 가능
   • 색상, 크기, Thumb 모양 등을 변경 가능.

 

3. Slider 함수 원형 ( Flutter 3.x 기준)

const Slider({
  super.key,
  required this.value,
  required this.onChanged,
  this.onChangeStart,
  this.onChangeEnd,
  this.min = 0.0,
  this.max = 1.0,
  this.divisions,
  this.label,
  this.activeColor,
  this.inactiveColor,
  this.mouseCursor,
  this.semanticFormatterCallback,
  this.focusNode,
  this.autofocus = false,
})

 

 

4. 함수 매개변수 설명

매개변수	설명
key	위젯의 고유 키를 설정합니다.
value	현재 슬라이더의 값을 나타냅니다. (min에서 max 사이의 값)
onChanged	슬라이더 값이 변경될 때 호출되는 콜백 함수입니다.
onChangeStart	슬라이더 드래그를 시작할 때 호출되는 콜백입니다.
onChangeEnd	슬라이더 드래그가 끝날 때 호출되는 콜백입니다.
min	슬라이더의 최소값을 설정합니다. 기본값은 0.0입니다.
max	슬라이더의 최대값을 설정합니다. 기본값은 1.0입니다.
divisions	슬라이더 값을 분할할 구간 수를 설정합니다.
label	슬라이더 값에 대한 레이블을 설정합니다. (Hover 시 표시)
activeColor	슬라이더의 활성 상태 색상을 지정합니다.
inactiveColor	슬라이더의 비활성 상태 색상을 지정합니다.
mouseCursor	마우스 커서를 커스터마이징할 수 있습니다.
semanticFormatterCallback	접근성 지원을 위한 값 포맷팅을 제공합니다.
focusNode	포커스 관리용 FocusNode를 설정합니다.
autofocus	위젯이 화면에 나타날 때 자동으로 포커스를 받을지 여부를 설정합니다.

 

 

5. Slider 뷰의 예제

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Slider Example'),
        ),
        body: const Center(
          child: SliderExample(),
        ),
      ),
    );
  }
}

class SliderExample extends StatefulWidget {
  const SliderExample({super.key});

  @override
  State<SliderExample> createState() => _SliderExampleState();
}

class _SliderExampleState extends State<SliderExample> {
  double _currentValue = 50.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          'Selected Value: ${_currentValue.toStringAsFixed(1)}',
          style: const TextStyle(fontSize: 18),
        ),
        Slider(
          value: _currentValue,
          onChanged: (newValue) {
            setState(() {
              _currentValue = newValue;
            });
          },
          onChangeStart: (startValue) {
            print('Started changing: $startValue');
          },
          onChangeEnd: (endValue) {
            print('Finished changing: $endValue');
          },
          min: 0,
          max: 100,
          divisions: 10,
          label: '${_currentValue.toStringAsFixed(1)}',
          activeColor: Colors.blue,
          inactiveColor: Colors.grey,
        ),
      ],
    );
  }
}