DatePicker

CupertinoDatePicker란?

CupertinoDatePicker는 Flutter의 Cupertino 위젯 세트의 일부로, iOS의 네이티브 날짜 선택기와 유사한 모양과 동작을 제공한다. 이 위젯은 사용자가 스크롤 휠을 사용하여 날짜, 시간, 또는 둘 다를 선택할 수 있게 해준다.

Material 스타일을 다루는 DatePicker는 showDatePicker가 있다.

이 블로그에서는 CupertinoDatePicker로 다루겠다.

 

 

주요 특징

1. 다양한 모드: 날짜만, 시간만, 또는 날짜와 시간을 함께 선택할 수 있는 모드를 제공한다.
2. 사용자 정의 가능: 초기 날짜, 최소/최대 날짜, 간격, 배경색 등을 커스터마이즈할 수 있다.
3. 반응형: 사용자의 선택에 즉시 반응하여 선택된 값을 업데이트한다.
4. iOS 스타일: iOS 사용자에게 친숙한 look and feel을 제공한다.

 

 

사용 방법

CupertinoDatePicker를 사용하려면 먼저 flutter/cupertino.dart 패키지를 import 해야 한다.

기본적인 사용 예는 다음과 같다:

 

• mode: 날짜, 시간, 또는 둘 다를 선택할 수 있는 모드를 지정한다.
• initialDateTime: 초기에 표시될 날짜와 시간을 설정한다.
• onDateTimeChanged: 사용자가 날짜/시간을 변경할 때 호출되는 콜백 함수이다.
• minimumDate / maximumDate: 선택 가능한 날짜의 범위를 제한한다.
• minimumYear / maximumYear: 선택 가능한 연도의 범위를 제한한다.
• minuteInterval: 분 선택의 간격을 설정한다. (예: 5분 간격).
• use24hFormat: 24시간 형식을 사용할지 여부를 결정한다.

 

 

실제 사용 예제

다음 블로그를 참고로하여 Dialog를 세팅한다. 

https://codejunh-develop.tistory.com/101

Dialog 띄우기

showCupertinoDialog 함수 안에 정의된 Contianer의 색깔을 하얀색으로 바꿔준다.

Dialog 함수안에 정의된 Container의 자식 위젯으로 CupertinoDatePicker 위젯을 불러온다. 

 

실행을 해보변 DatePicker가 잘 띄어지는 것을 볼 수 있고, 선택된 날짜에 따라(print(date)를 통해) 콘솔에 출력에 출력이 되는 것을 볼 수 있다. 

Dialog를 통해 DatePicker를 띄우면  showCupertinoDialog() 함수의 barrierDismissible: true에 의해 Dialog 밖을 선택하면 Dialog가 닫히면서 DatePicker도 같이 닫히는 것을 볼 수 있다.

 

CupertinoDatePicker 위젯은 일반적으로 showCupertinoModalPopup() 또는 showCupertinoDialog() 함수를 통해 화면에 띄워진다. 이 함수들은 Cupertino 스타일의 모달 팝업이나 다이얼로그를 표시하는 데 사용된다.

Material 스타일을 따르는 showDatePicker는 위젯이 아니라 함수이다. 

그렇기 때문에 이 함수는 직접 호출하여 사용할 수 있으며, 별도의 다른 함수 없이도 사용할 수 있다.

showDatePicker는 비동기 함수로, 사용자가 날짜를 선택하거나 다이얼로그를 닫을 때까지 기다리는 기능까지 포함한다.

 

ElevatedButton을 통해 showDatePicker 함수를 띄어보는 예제는 다음과 같다: 

실행 화면: