[flutter] 플러터 TimePicker에서 선택한 시간을 포함하는 범위 검증하기

07 Dec 2023

flutter

소개

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 앱을 개발할 수 있습니다. 플러터 내장 위젯 중 하나인 TimePicker는 사용자가 시간을 선택할 수 있도록 하는 기능을 제공합니다. 이번 포스트에서는 플러터의 TimePicker에서 선택한 시간이 특정 범위에 속하는지를 검증하는 방법을 알아보겠습니다.

예시 코드

다음은 선택 가능한 시간 범위를 정의하고, TimePicker에서 선택한 시간이 이 범위에 속하는지를 검증하는 예시 코드입니다.

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

class TimeValidationPage extends StatefulWidget {
  @override
  _TimeValidationPageState createState() => _TimeValidationPageState();
}

class _TimeValidationPageState extends State<TimeValidationPage> {
  TimeOfDay _selectedTime = TimeOfDay.now();
  TimeOfDay _minTime = TimeOfDay(hour: 9, minute: 0);
  TimeOfDay _maxTime = TimeOfDay(hour: 18, minute: 0);

  Future<void> _selectTime() async {
    final TimeOfDay? picked = await showTimePicker(
      context: context,
      initialTime: _selectedTime,
    );

    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });

      if (_isTimeOutOfRange()) {
        _showOutOfRangeDialog();
      }
    }
  }

  bool _isTimeOutOfRange() {
    final currentTimeInMinutes = _selectedTime.hour * 60 + _selectedTime.minute;
    final minTimeInMinutes = _minTime.hour * 60 + _minTime.minute;
    final maxTimeInMinutes = _maxTime.hour * 60 + _maxTime.minute;

    return currentTimeInMinutes < minTimeInMinutes ||
        currentTimeInMinutes > maxTimeInMinutes;
  }

  void _showOutOfRangeDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('선택한 시간이 유효하지 않습니다.'),
          content: Text('선택 가능한 시간 범위는 $_minTime 부터 $_maxTime 입니다.'),
          actions: <Widget>[
            TextButton(
              child: Text('확인'),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Validation'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlineButton(
              onPressed: _selectTime,
              child: Text('시간 선택'),
            ),
            SizedBox(height: 16),
            Text(
              '선택한 시간: ${_selectedTime.format(context)}',
              style: TextStyle(fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

설명

_selectedTime 변수는 초기에 현재 시간으로 설정됩니다.
_minTime 변수와 _maxTime 변수는 선택 가능한 최소 시간과 최대 시간을 정의합니다. 이 예시에서는 9시부터 18시까지의 범위로 설정하였습니다.
_selectTime 메소드는 showTimePicker를 사용하여 TimePicker 다이얼로그를 띄웁니다. 사용자가 시간을 선택하면 _selectedTime 값이 업데이트됩니다.
_isTimeOutOfRange 메소드는 선택한 시간이 지정한 범위를 벗어나는지를 검사합니다. 시간은 분 단위로 변환하여 비교하게 됩니다.
_showOutOfRangeDialog 메소드는 선택한 시간이 유효하지 않을 경우 다이얼로그 창을 띄워 알립니다.
build 메소드에서는 위젯을 구성하여 화면에 표시합니다. ‘시간 선택’ 버튼을 누르면 _selectTime 메소드가 호출되고, 선택한 시간이 표시됩니다.

결론

이번 포스트에서는 플러터의 TimePicker에서 선택한 시간을 특정 범위로 제한하는 방법을 알아보았습니다. 앱 개발 시, 사용자가 입력한 데이터의 유효성을 검증하는 것은 매우 중요하며, TimePicker에서 제공하는 시간 선택을 제한하는 기능은 사용자 경험을 향상시킬 수 있는 요소입니다.