이 부분을 클릭하면, flutter가 제공하는 showDatePicker()함수가 실행되면서, DatePicker 팝업이 뜹니다.
DatePicker 위젯의 소스코드
import 'package:flutter/material.dart';
class DatePicker extends StatefulWidget {
const DatePicker({
super.key,
required this.callback,
this.initVal,
});
final Function callback;
final String? initVal;
@override
State<DatePicker> createState() => _DatePickerState();
}
class _DatePickerState extends State<DatePicker> {
late DateTime date;
@override
void initState() {
super.initState();
if (widget.initVal != null) {
date = DateTime.parse(widget.initVal!);
} else {
date = DateTime.now();
}
}
@override
Widget build(BuildContext context) {
return TextButton(
style: ButtonStyle(
padding: WidgetStateProperty.all<EdgeInsets>(EdgeInsets.zero),
minimumSize: WidgetStateProperty.all<Size>(Size.zero),
tapTargetSize: MaterialTapTargetSize.shrinkWrap,
),
onPressed: () async {
final selectedDate = await showDatePicker(
context: context,
initialDate: date,
firstDate: DateTime(2000),
lastDate: DateTime.now(),
);
if (selectedDate != null) {
setState(() {
date = selectedDate;
});
widget.callback(date);
}
},
child: Text(
"${date.year.toString()}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, '0')}",
style: const TextStyle(
color: Colors.black,
fontSize: 17,
),
),
);
}
}
DatePicker 위젯의 소스코드 분석
DatePicker는 콜백함수와 initVal을 전달받습니다.
callback : 콜백함수를 통해, 상위 위젯인 굿즈 추가 페이지로 날짜 정보를 전달합니다. initVal : initVal은 굿즈의 날짜 초기값을 의미합니다. 나중에 굿즈를 수정할 경우, 사전에 설정된 날짜를 불러오는 역할을 담당합니다.
DatePicker는 stateful위젯으로, initState()를 사용할 수 있습니다.
Flutter에서 기본 제공하는 DateTime 클래스의 인스턴스인 'date'를 state로 지정합니다.
initState() 과정에서, 만약 initVal을 전달받는다면 '사전 설정된 날짜'를, 그렇지 않다면(굿즈를 신규로 추가하는 경우라면) '오늘 날짜'를 date state에 저장합니다.
이제 DatePicker 팝업을 열어줄 버튼을 만들 차례입니다.
TextButton 위젯을 통해, 날짜 부분을 누르면 DatePicker가 뜰 수 있게 합니다.
onPressed를 설정합니다.
비동기 함수를 이용해서, showDatePicker()를 실행하고 날짜를 전달받는 기능을 구현합니다.
showDatePicker initialDate : DatePicker가 켜지자마자 초기에 지정될 날짜입니다. 아까 설정한 date state를 전달합니다. firstDate : 날짜를 2000년부터 설정할 수 있게 합니다. lastDate : 날짜를 '오늘'까지 지정할 수 있게 합니다.
Flutter에서 지원하는 showDatePicker는 공식문서를 참고해서 이용하면 좋습니다.
