[flutter] 플러터 TimePicker에서 선택 가능한 시간 목록 설정하기

07 Dec 2023

flutter

플러터의 TimePicker는 시간을 선택할 수 있는 간편한 방법을 제공합니다. 하지만 기본 설정을 사용하면 사용자가 선택 가능한 시간 범위가 00:00부터 23:59까지로 제한됩니다. 이 경우 사용자가 원하는 시간 범위를 설정할 수 없어 제한적일 수 있습니다.

여기서는 플러터 TimePicker에서 선택 가능한 시간 목록을 설정하는 방법을 알려드리겠습니다.

1. TimeRangePicker 사용하기

만약 특정 시간 범위만 선택 가능하게 하고 싶다면, time_range_picker 패키지를 사용하는 것이 좋습니다. 이 패키지는 사용자에게 시간 범위를 제공하고, 사용자가 이 범위 내에서 원하는 시간을 선택할 수 있게 해줍니다.

프로젝트의 pubspec.yaml 파일에 패키지를 추가해주세요:

dependencies:
  time_range_picker: ^1.0.1

이제 패키지를 가져와 사용할 수 있습니다. 아래는 플러터의 showTimeRangePicker 함수를 사용하여 선택 가능한 시간 범위를 설정하는 예제입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Time Range Picker Example'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () => showTimeRangePicker(
              context: context,
              start: TimeOfDay(hour: 9, minute: 0),
              end: TimeOfDay(hour: 18, minute: 0),
              interval: Duration(minutes: 30),
            ),
            child: Text('Open Time Range Picker'),
          ),
        ),
      ),
    );
  }
}

이 예제에서는 showTimeRangePicker 함수를 호출하여 선택 가능한 시간 범위를 정의합니다. start와 end 매개변수를 사용하여 시작 시간과 종료 시간을 설정하고, interval 매개변수를 사용하여 시간 간격을 정의합니다. 위의 예제에서는 9:00부터 18:00까지 30분 간격으로 선택 가능한 시간 범위를 설정한 것입니다.

2. Custom TimePicker 만들기

만약 더 복잡한 시간 선택 기능이 필요하다면, 직접 커스텀 TimePicker를 만들 수도 있습니다. 이를 통해 사용자에게 원하는 시간 목록을 제공하거나 특정 시간 제약 조건을 적용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  final List<TimeOfDay> availableTimes = [
    TimeOfDay(hour: 9, minute: 0),
    TimeOfDay(hour: 12, minute: 0),
    TimeOfDay(hour: 15, minute: 0),
    TimeOfDay(hour: 18, minute: 0),
  ];

  Future<TimeOfDay> _selectTime(BuildContext context) async {
    TimeOfDay selectedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
      builder: (BuildContext context, Widget child) {
        return MediaQuery(
          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
          child: child,
        );
      },
    );

    if (selectedTime != null) {
      if (!availableTimes.contains(selectedTime)) {
        showDialog(
          context: context,
          builder: (BuildContext context) {
            return AlertDialog(
              title: Text('Invalid Time'),
              content: Text('Please select a valid time.'),
              actions: [
                FlatButton(
                  child: Text('OK'),
                  onPressed: () => Navigator.pop(context),
                ),
              ],
            );
          },
        );
        return _selectTime(context);
      }
      return selectedTime;
    }

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Custom Time Picker Example'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () => _selectTime(context),
            child: Text('Open Custom Time Picker'),
          ),
        ),
      ),
    );
  }
}

위의 예제에서는 availableTimes라는 변수를 사용하여 사용자가 선택 가능한 시간 목록을 설정합니다. _selectTime 함수에서는 showTimePicker 함수를 호출하여 커스텀 TimePicker를 생성합니다. 기본적으로는 24시간 형식으로 표시되지만, MediaQuery를 사용하여 12시간 형식으로 변경되도록 설정합니다.

또한, 사용자가 선택한 시간이 availableTimes에 포함되어 있는지 확인하여 유효성을 검사하고, 유효하지 않은 시간이 선택되었을 경우에는 알림 대화상자를 표시합니다.

결론

플러터 TimePicker에서 선택 가능한 시간 목록을 설정하는 방법을 알아보았습니다. time_range_picker 패키지를 사용하거나 커스텀 TimePicker를 만들어 사용자가 원하는 시간 범위나 시간 제약 조건을 설정할 수 있습니다.

더 많은 기능을 추가하거나 플러터의 다른 위젯과 결합하여 사용자 경험을 향상시킬 수도 있습니다. 이를 통해 다양한 애플리케이션에서 TimePicker를 활용할 수 있습니다.