[flutter] 플러터 Slider를 사용하여 세부 설정 값을 조절하는 방법은?

08 Dec 2023

flutter

앱에서 사용자가 값을 조절할 수 있게 하려면 Slider 위젯을 사용할 수 있습니다. 이에 대한 예제를 작성해보겠습니다.

Slider 위젯 추가

우선, 화면에 Slider를 추가합니다. 아래와 같이 Slider를 추가할 수 있습니다.

import 'package:flutter/material.dart';

class SliderExample extends StatefulWidget {
  @override
  _SliderExampleState createState() => _SliderExampleState();
}

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

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentValue,
      min: 0,
      max: 100,
      onChanged: (double value) {
        setState(() {
          _currentValue = value;
        });
      },
    );
  }
}

위 예제에서는 Slider 위젯을 추가하고, 초기 값(_currentValue), 최소 값(min), 최대 값(max)을 설정하였습니다.

값 변경 감지

Slider의 값을 변경할 때마다 해당 값을 감지하고 반영하기 위해 onChanged 콜백을 사용합니다. 위의 예제에서는 onChanged 속성을 통해 값을 변경할 때마다 _currentValue를 갱신하도록 설정했습니다.

값 활용

_currentValue에는 사용자가 선택한 값이 저장되어 있으므로, 이 값을 활용하여 원하는 기능을 수행하거나 UI를 업데이트할 수 있습니다.

위 예제를 참고하여, 플러터 앱에서 Slider를 사용하여 세부 설정 값을 조절하는 방법에 대해 간단히 알아보았습니다.