[flutter] 플러터 TimePicker에서 선택 가능한 시간 목록 커스터마이징하기

07 Dec 2023

flutter

플러터의 TimePicker 위젯은 사용자가 시간을 선택할 수 있도록 도와주는 유용한 도구입니다. 기본적으로 TimePicker는 24시간 형식으로 시간을 표시하며, 1시간 단위로 선택할 수 있습니다. 하지만 때때로 우리는 선택 가능한 시간 목록을 사용자 정의하거나, 특정 시간 범위로 제한하고 싶을 수도 있습니다. 이번 글에서는 플러터에서 TimePicker에서 선택 가능한 시간 목록을 커스터마이징하는 방법에 대해 알아보겠습니다.

1. 기본 TimePicker 사용하기

우선, 기본적인 TimePicker를 사용하는 방법을 알아봅시다. 다음과 같이 코드를 작성하여 TimePicker를 만들 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TimePicker Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TimePicker Example'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Open TimePicker'),
            onPressed: () {
              showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
              );
            },
          ),
        ),
      ),
    );
  }
}

위의 코드를 실행하면 버튼을 누르면 현재 시간을 기본 값으로 가진 TimePicker가 나타납니다.

2. TimePicker에서 선택 가능한 시간 목록 제한하기

TimePicker에서 선택 가능한 시간 목록을 제한하고 싶은 경우에는 SelectableTimePredicate를 사용하면 됩니다. 이 함수를 사용하여 선택 가능한 시간을 정의한 후, TimePicker의 selectableTimePredicate 속성에 지정해주면 됩니다.

예를 들어, 9시부터 18시까지의 시간만 선택 가능하도록 하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // 9시부터 18시까지 선택 가능한 시간 정의
  bool _isSelectable(TimeOfDay time) {
    return time.hour >= 9 && time.hour <= 18;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TimePicker Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TimePicker Example'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Open TimePicker'),
            onPressed: () {
              showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
                selectableTimePredicate: _isSelectable,
              );
            },
          ),
        ),
      ),
    );
  }
}

위의 코드에서 _isSelectable 함수는 선택 가능한 시간을 정의합니다. time.hour >= 9 && time.hour <= 18는 9시부터 18시까지의 시간을 선택 가능한 시간으로 정의하는 조건입니다.

이제 코드를 실행하고 TimePicker를 열어보면 9시부터 18시까지의 시간이 선택 가능한 것을 확인할 수 있습니다.

3. TimePicker에서 선택 가능한 시간 목록 사용자 정의하기

TimePicker에서 선택 가능한 시간 목록을 사용자 정의하고 싶은 경우에는 SelectableTimePredicate 함수를 사용하여 원하는 시간을 선택 가능하도록 정의하면 됩니다. 다음은 선택 가능한 시간 목록을 사용자 정의하는 예시 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // 선택 가능한 시간 목록 정의
  bool _isSelectable(TimeOfDay time) {
    List<int> availableHours = [9, 12, 15, 18];
    int selectedHour = time.hour;
    return availableHours.contains(selectedHour);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TimePicker Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TimePicker Example'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Open TimePicker'),
            onPressed: () {
              showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
                selectableTimePredicate: _isSelectable,
              );
            },
          ),
        ),
      ),
    );
  }
}

위의 코드에서 _isSelectable 함수는 [9, 12, 15, 18] 시간을 선택 가능한 시간으로 정의합니다. 따라서 사용자는 9시, 12시, 15시, 18시 중에만 시간을 선택할 수 있습니다.

이제 코드를 실행하고 TimePicker를 열어보면 사용자가 정의한 선택 가능한 시간 목록만 선택할 수 있는 것을 확인할 수 있습니다.

마무리

이번 글에서는 플러터의 TimePicker에서 선택 가능한 시간 목록을 커스터마이징하는 방법에 대해 알아보았습니다. 기본적으로 제공되는 기능 외에도 플러터에서는 선택 가능한 시간을 사용자 정의하거나, 특정 시간 범위로 제한하는 등 다양한 활용이 가능합니다. 이러한 기능을 사용하여 사용자의 요구사항에 맞는 TimePicker를 만들어보세요.