[Flutter] showDatePicker_0

달력이나 시계를 출력해서 날짜나 시간을 고르는 메소드에 대해서 메모.
직접 위젯을 만들려먼 매우매우 성가신 일이 될 텐데 flutter에서는 이러한 위젯도 간단?하게 구현 할 수 있도록 만들어져있다!

• showDatePicker : 날짜를 선택
• showTimePicker : 시간을 선택
• showDateRangePicker : 기간을 선택

위 세개의 메소드들은 Future<DateTime?>타입을 return한다.

1. showDatePicker
   Future형태의 값을 return하기 때문에 비동기 함수로 async를 붙여주고 await로 date값을 받는다.
   실행 시키면 달력이 표시되며 원하는 날짜를 클릭하거나 연필 모양을 눌러 직접 값을 입력할 수 있다. OK버튼을 누르면 종료!

ListTile(
            onTap: () async {
              final date = await showDatePicker(
                context: context,
                initialDate: DateTime.now(),
                firstDate: DateTime(2000),
                lastDate: DateTime(2024),
              );
              print(date);
              ...

2. showTimePicker
   마찬가지로 Futture형태이기 때문에 async를 붙여주고 await로 time값을 받는다. showDatePicker과 다르게 DateTime이 아니라 TimeOfDay를 사용한다!
   실행시키면 시계가 표시되며 원하는 시간을 직관적으로 고를 수 있다. 키보드 버튼을 터치하면 직접 값을 입력 할 수 있다. OK버튼을 누르면 종료!

ListTile(
            onTap: () async {             
              final time = await showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(),
              );
              print(time);
              ...

3. showDateRangePicker
   이것도 마찬가지로 Futture형태이기 때문에 async를 붙여주고 await로 값을 받는다. 실행시키면 시작과 끝 날짜를 선택하여 기간을 고를 수 있는 달력이 표시된다. (근데 아마 배경이 하얀색이고 글자도 하얀색이라 보이지 않을것)

ListTile(
            onTap: () async {
              final booking = await showDateRangePicker(
                context: context,
                firstDate: DateTime.now(),
                lastDate: DateTime(2025),
              );
              print(booking);

글자가 보이지 않을 경우 builder에 값을 넣어서 색상을 정해줄 수 있다. 밑에 처럼 코드를 적으면 기본적이 material 디자인의 색상(파랑)이 적용된다.

ListTile(
            onTap: () async {
              final booking = await showDateRangePicker(
                context: context,
                firstDate: DateTime.now(),
                lastDate: DateTime(2025),
                builder: (context, child) {
                  return Theme(
                    data: ThemeData(),
                    child: child!,
                  );
                },
              );
              print(booking);

다른 색상을 적용하고 싶으면 이렇게 바꾸면 된다.
showDateRangePicker 외에도 showDatePicker나 showTimePicker에서도 builder 값을 이용해서 색상 등을 변경 할 수 있다.

ListTile(
            onTap: () async {
              final booking = await showDateRangePicker(
                context: context,
                firstDate: DateTime.now(),
                lastDate: DateTime(2025),
                builder: (context, child) {
                  return Theme(
                    data: ThemeData(
                      appBarTheme: const AppBarTheme(
                        foregroundColor: Colors.white,
                        backgroundColor: Colors.amber,
                      ),
                    ),
                    child: child!,
                  );
                },
              );
              print(booking);