[flutter] 플러터 Slider를 사용하여 사용자가 원하는 시간을 설정하는 방법은?

08 Dec 2023

flutter

우선, Slider를 사용하기 위해 다음과 같이 코드를 작성합니다.

import 'package:flutter/material.dart';

class TimeSlider extends StatefulWidget {
  @override
  _TimeSliderState createState() => _TimeSliderState();
}

class _TimeSliderState extends State<TimeSlider> {
  double _currentTime = 0.0;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentTime,
      min: 0.0,
      max: 24.0,
      divisions: 48,
      label: _currentTime.toStringAsFixed(1),
      onChanged: (double value) {
        setState(() {
          _currentTime = value;
        });
      },
    );
  }
}

위 코드는 0부터 24까지의 값을 표시하는 Slider를 만드는 예제입니다. 사용자는 Slider를 조절하여 원하는 시간대를 선택할 수 있습니다. 선택된 값은 _currentTime 변수에 저장됩니다.

마찬가지로, 사용자가 선택한 시간을 화면에 보여주기 위해서는, _currentTime 변수를 활용하여 다음과 같이 UI를 구성할 수 있습니다.

Text('Selected Time: ${_currentTime.toStringAsFixed(1)}');

이렇게 하면 사용자가 원하는 시간을 Slider를 통해 선택하고 선택된 시간을 화면에 표시할 수 있습니다.

위 코드를 참고하여 플러터(Flutter) 앱에서 Slider를 사용하여 사용자가 원하는 시간을 설정할 수 있도록 구현해 보세요!