Flutter의 슬라이더(Slider) 사용법

Flutter에서 Slider 위젯은 사용자가 특정 값의 범위 내에서 값을 선택할 수 있도록 하는 인터페이스 요소입니다. 슬라이더는 볼륨 조절, 밝기 조절, 설정 값 조정 등 다양한 용도로 사용됩니다. 이번 글에서는 Flutter의 Slider 위젯의 다양한 기능과 사용법에 대해 자세히 살펴보겠습니다.

1. 기본 Slider 사용법

Slider 위젯의 기본적인 사용법은 매우 간단합니다. value와 onChanged 속성을 사용하여 슬라이더의 상태와 상태 변경 이벤트를 처리할 수 있습니다.

 

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _currentSliderValue = 20;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Slider Demo')),
        body: Center(
          child: Slider(
            value: _currentSliderValue,
            min: 0,
            max: 100,
            divisions: 10,
            label: _currentSliderValue.round().toString(),
            onChanged: (double value) {
              setState(() {
                _currentSliderValue = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

 

위 코드는 기본적인 슬라이더를 생성하고, 사용자가 슬라이더를 조작할 때 _currentSliderValue 상태가 변경되도록 합니다.

2. 슬라이더의 범위 설정

슬라이더의 최소값과 최대값을 설정하려면 min과 max 속성을 사용합니다.

 

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

 

위 코드는 슬라이더의 최소값을 0, 최대값을 100으로 설정합니다.

3. 슬라이더의 분할 설정

슬라이더의 분할 단위를 설정하려면 divisions 속성을 사용합니다. 이는 슬라이더를 일정한 간격으로 나누는 데 유용합니다.

 

Slider(
  value: _currentSliderValue,
  min: 0,
  max: 100,
  divisions: 10,
  label: _currentSliderValue.round().toString(),
  onChanged: (double value) {
    setState(() {
      _currentSliderValue = value;
    });
  },
)

 

위 코드는 슬라이더를 10단위로 분할하여 표시합니다.

4. 슬라이더의 색상 변경

슬라이더의 색상을 변경하려면 activeColor와 inactiveColor 속성을 사용합니다.

 

Slider(
  value: _currentSliderValue,
  min: 0,
  max: 100,
  activeColor: Colors.red,
  inactiveColor: Colors.blue,
  onChanged: (double value) {
    setState(() {
      _currentSliderValue = value;
    });
  },
)

 

위 코드는 활성화된 슬라이더의 색상을 빨간색으로, 비활성화된 슬라이더의 색상을 파란색으로 설정합니다.

 

 

반응형

 

 

5. 슬라이더의 라벨 표시

슬라이더의 현재 값을 라벨로 표시하려면 label 속성을 사용합니다. 보통 divisions와 함께 사용하여 각 분할 단위에 라벨을 표시합니다.

 

Slider(
  value: _currentSliderValue,
  min: 0,
  max: 100,
  divisions: 5,
  label: _currentSliderValue.round().toString(),
  onChanged: (double value) {
    setState(() {
      _currentSliderValue = value;
    });
  },
)

 

위 코드는 슬라이더의 현재 값을 라벨로 표시합니다. 라벨은 슬라이더의 손잡이 위에 표시됩니다.

6. 비활성화된 슬라이더

슬라이더를 비활성화하려면 onChanged 속성에 null을 할당합니다.

 

Slider(
  value: _currentSliderValue,
  min: 0,
  max: 100,
  onChanged: null, // 슬라이더 비활성화
)

 

위 코드는 슬라이더를 비활성화하여 사용자가 조작할 수 없도록 합니다.

7. 여러 슬라이더 처리

여러 개의 슬라이더를 처리하려면 각 슬라이더의 상태를 별도로 관리하고, 각 슬라이더의 상태 변경을 처리하는 방법을 구현해야 합니다.

 

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _sliderValue1 = 20;
  double _sliderValue2 = 50;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Multiple Sliders')),
        body: Column(
          children: <Widget>[
            Slider(
              value: _sliderValue1,
              min: 0,
              max: 100,
              onChanged: (double value) {
                setState(() {
                  _sliderValue1 = value;
                });
              },
            ),
            Slider(
              value: _sliderValue2,
              min: 0,
              max: 100,
              onChanged: (double value) {
                setState(() {
                  _sliderValue2 = value;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 두 개의 슬라이더를 생성하고, 각 슬라이더의 상태를 별도로 관리합니다.

결론

Slider 위젯은 Flutter 애플리케이션에서 사용자로부터 특정 값의 범위 내에서 값을 선택하도록 하는 데 매우 유용한 도구입니다. 기본 사용법부터 슬라이더의 범위 설정, 분할 단위, 색상 변경, 라벨 표시, 비활성화, 여러 슬라이더 처리 등 다양한 기능을 활용하여 사용자 경험을 향상시킬 수 있습니다. Slider 위젯을 적절히 활용하여 직관적이고 효율적인 사용자 인터페이스를 제공하는 애플리케이션을 만들어보세요.