[flutter] 플러터 TimePicker에서 시간 선택화면 스크롤 수정하기

07 Dec 2023

flutter

플러터에서 제공하는 TimePicker는 시간을 선택하는 화면을 제공하는데, 기본적으로 시간을 선택하는 스크롤은 1시부터 12시까지의 범위를 가지고 있습니다. 하지만 때로는 다른 범위를 가지는 시간 선택이 필요할 수 있습니다. 이번 글에서는 플러터 TimePicker에서 시간 선택 화면의 스크롤을 수정하는 방법에 대해 알아보겠습니다.

1. TimePicker 사용하기

먼저, 플러터 앱에서 TimePicker를 사용하기 위해 아래 코드를 추가합니다.

import 'package:flutter/material.dart';

class MyTimePicker extends StatefulWidget {
  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  TimeOfDay _selectedTime;

  @override
  void initState() {
    super.initState();
    _selectedTime = TimeOfDay.now();
  }

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Time Picker'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Time: ${_selectedTime.format(context)}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              child: Text('Select Time'),
              onPressed: () => _selectTime(context),
            ),
          ],
        ),
      ),
    );
  }
}

위 코드에서는 TimePicker를 사용하기 위해 showTimePicker를 호출하고 선택된 시간을 _selectedTime 변수에 저장합니다. 또한, 선택된 시간을 화면에 표시하기 위해 Text 위젯을 사용하고, ElevatedButton을 눌렀을 때 showTimePicker를 호출하는 기능을 추가했습니다.

2. 시간 선택 범위 수정하기

TimePicker에서 시간 선택 범위를 수정하기 위해 showTimePicker 메서드의 initialTime 매개변수를 사용합니다. 이 매개변수에는 TimeOfDay 객체를 전달하여 선택할 수 있는 시간 범위를 지정할 수 있습니다.

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay(hour: 15, minute: 0), // 시간 선택 범위 수정
  );

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

위 코드에서는 initialTime 매개변수에 TimeOfDay(hour: 15, minute: 0)을 전달하여 시간 선택 범위를 15시부터 시작하도록 수정했습니다. 선택 가능한 시간 범위를 사용자의 요구에 맞게 수정하여 원하는 시간 선택을 가능하게 할 수 있습니다.

3. 마무리

플러터의 TimePicker는 시간 선택 기능을 간편하게 구현할 수 있는 유용한 위젯입니다. 만약 기본적인 시간 선택 범위를 수정하고 싶다면 initialTime 매개변수를 사용하여 시간 선택 화면의 스크롤을 수정할 수 있습니다. 이를 활용하여 사용자가 원하는 형태의 시간 선택 화면을 만들 수 있습니다.

더 자세한 내용은 Flutter 공식 문서를 참고하시기 바랍니다.