[053] 플러터 (Flutter) 배우기 - bottom_picker 사용하여 날짜 선택하기

안녕하세요~ totally 개발자입니다.

 

bottom_picker

 

지난 포스팅에서는 showDatePicker로 날짜를 선택하는 방법에 대해 살펴보았고 이번에는 bottomPicker를 통해 날짜를 선택하는 방법에 대해 살펴봅니다. bottomPicker 말 그대로 기기 아래 부분의 UI로 구성되어 날짜를 선택할 수 있도록 도와주는 패키지로 매우 간단하게 구현할 수 있습니다. 

 

Step 1: pubspec.yaml에 bottom_picker 패키지를 추가합니다.

 

 

Step 2: 27번째처럼 변수를 선언해주시고 33~52번째 줄처럼 메소드를 선언하여 bottomPicker가 보여질 수 있도록 구성합니다. 여기에서는 dateOrder만 잘 해주시면 되는데 DatePickerDateOrder.ymd 즉 연/월/일 이렇게 구성해주시면 됩니다. 50번째 줄에 bottomPickerTheme은 버튼의 테마를 구성합니다.

 

 

 

Step 3: 65번째 줄처럼 버튼을 눌렀을 때 메소드를 호출하고 69번째 줄에 그 선택한 날짜를 출력해주면 됩니다.

 

 

 

Step 4: 결과는 아래와 같습니다.