[flutter] 플러터 TimePicker의 시간 선택 제한 기능

07 Dec 2023

flutter

TimeRangePicker 패키지 활용하기

TimePicker의 시간 선택 제한 기능을 구현하기 위해서는 TimeRangePicker 패키지를 사용할 수 있습니다. 이 패키지는 특정 시간 범위를 지정하여 TimePicker에서 가능한 시간 선택을 제한할 수 있습니다.

TimeRangePicker 패키지를 사용하기 위해서는 우선 time_range_picker 패키지를 pubspec.yaml 파일에 추가해야 합니다:

dependencies:
  time_range_picker: ^1.0.1

이제 패키지를 프로젝트에 추가했으니, 아래와 같은 코드를 사용하여 TimePicker를 구현할 수 있습니다:

import 'package:flutter/material.dart';
import 'package:time_range_picker/time_range_picker.dart';

class TimePickerPage extends StatefulWidget {
  @override
  _TimePickerPageState createState() => _TimePickerPageState();
}

class _TimePickerPageState extends State<TimePickerPage> {
  TimeRange timeRange;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TimePicker'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('시간 선택'),
          onPressed: () {
            showTimeRangePicker(
              context: context,
              start: TimeOfDay(hour: 9, minute: 0),
              end: TimeOfDay(hour: 18, minute: 0),
              interval: Duration(minutes: 15),
              disable: ['12:30', '15:00-16:00'],
            ).then((value) {
              if (value != null) {
                setState(() {
                  timeRange = value;
                });
              }
            });
          },
        ),
      ),
      bottomNavigationBar: timeRange != null
          ? BottomNavigationBar(
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.timer),
                  title: Text('시작 시간: ${timeRange.start.format(context)}'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.timer_off),
                  title: Text('종료 시간: ${timeRange.end.format(context)}'),
                ),
              ],
            )
          : null,
    );
  }
}

위의 코드에서 showTimeRangePicker 함수를 사용하여 TimePicker를 호출하고, start와 end 매개변수를 사용하여 시간 범위를 지정합니다. 또한 interval 매개변수로 시간 간격을 설정할 수도 있습니다.

disable 매개변수는 선택하지 못하게 할 특정 시간들을 설정하기 위해 사용합니다. ‘HH:mm’ 형식의 시간들 또는 ‘HH:mm-HH:mm’ 형식의 시간 범위들을 지정할 수 있습니다.

TimePicker에서 선택한 시간은 timeRange 변수에 저장되어 화면 하단의 bottomNavigationBar에 표시됩니다.

이제 TimeRangePicker를 사용하여 시간 선택을 제한하는 기능을 구현할 수 있게 되었습니다. 플러터에서 TimePicker를 사용할 때 이러한 기능이 필요하다면 TimeRangePicker 패키지를 활용해보세요.

참고 자료

time_range_picker 패키지