[flutter] 플러터 TimePicker에서 초 단위 선택 옵션 사용하기

07 Dec 2023

flutter

플러터의 TimePicker 위젯은 기본적으로 시간과 분 단위만 선택할 수 있습니다. 하지만 때로는 초 단위까지 선택할 필요가 있을 수 있습니다. 이번 블로그 포스트에서는 플러터 TimePicker에서 초 단위 선택 옵션을 사용하는 방법에 대해 알아보겠습니다.

1. 초 단위 선택 옵션 추가하기

플러터의 TimePicker는 다양한 옵션을 제공합니다. 그 중에서도 showSecondsColumn 속성을 사용하면 초 단위 선택 옵션을 추가할 수 있습니다. 이 속성을 true로 설정하면 TimePicker에 초 단위 컬럼이 표시됩니다.

showTimePicker(
  initialTime: TimeOfDay.now(),
  showSecondsColumn: true,
);

2. 선택한 초 값 가져오기

TimePicker에서 선택한 값을 가져오기 위해서는 await와 onTimeSet 콜백을 사용해야 합니다. 이를 활용하여 선택한 초 값을 가져올 수 있습니다.

TimeOfDay selectedTime = await showTimePicker(
  initialTime: TimeOfDay.now(),
  showSecondsColumn: true,
);

if (selectedTime != null) {
  int seconds = selectedTime.hour * 3600 + selectedTime.minute * 60 + selectedTime.second;
  print('Selected time in seconds: $seconds');
} else {
  print('No time selected');
}

선택한 시간을 초로 변환하려면 selectedTime.hour * 3600 + selectedTime.minute * 60 + selectedTime.second와 같이 계산하여 초 값을 구할 수 있습니다.

3. 사용 예제

아래는 초 단위 선택 옵션을 사용하는 예제입니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

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

              if (selectedTime != null) {
                int seconds = selectedTime.hour * 3600 + selectedTime.minute * 60 + selectedTime.second;
                print('Selected time in seconds: $seconds');
              } else {
                print('No time selected');
              }
            },
            child: Text('Select Time'),
          ),
        ),
      ),
    );
  }
}

위 예제에서는 showSecondsColumn: true를 사용하여 초 단위 선택 옵션을 추가하고, 선택한 시간 값을 출력하도록 구현되어 있습니다.

이제 플러터 TimePicker에서 초 단위 선택 옵션을 사용할 준비가 되었습니다. 간단한 코드 몇 줄로 초 단위를 선택할 수 있는 시간 선택 기능을 구현할 수 있습니다.

더 많은 플러터 관련 정보를 얻으려면 플러터 공식 문서를 참조하세요.