[Flutter] showDatePicker 사용하기

showDatePicker 화면

DatePicker는 날짜를 선택하는 모달을 표시한다. DatePicker의 경우 showDatePicker 메소드를 호출해서 DatePicker 표시할 수 있다.

변수 알아보기

Future _selectDate() async {
      DateTime? picked = await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2016),
          lastDate: DateTime(2029));
					builder: (BuildContext context, Widget? child) {
        return Theme(
          data: ThemeData.dark(), //다크 테마
          child: child!,
        );
      },
      if (picked != null) {
        setState(() => date = DateFormat('yyyy년 MM월 dd일').format(picked));
      }
      print(date);
    }

DatePicker에는 여러 변수가 선언되어 사용된다. 하나씩 알아보도록 하겠다.

아래는 필수적인 변수이다. 안 쓰면 오류가 나니 주의하자.

• context : 모달 표시를 위해 BuildContext를 전달해야 한다.
• initialDate : 처음에 표시되는 초기 날짜를 의미한다.firstDate와 lastDate의 범위내에 있어야 한다.
• firstDate : 표시할 수 있는 최소 날짜를 말한다. 즉, 달력의 시작일을 의미한다.
• lastDate : 표시할 수 있는 최대 날짜를 말한다. 즉, 달력의 마지막 날짜를 의미한다.

아래서부터는 부가적으로 써도 되는 변수들이다. 참고할 것만 적어보도록 하겠다.

• builder
  • data : 달력에 표시하고자 하는 테마를 지정할 수 있다. 대표적으로 dark, fallback등이 있다. 이는 다크테마, 밝은 테마를 의미한다.
  • locale : 달력에 표시되는 언어는 us로 되어 있는데 한글로 바꾸는 것도 가능하다. 

datepicker 활용하기

Future _selectDate() async {
      DateTime? picked = await showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2016),
          lastDate: DateTime(2029));
					builder: (BuildContext context, Widget? child) {
        return Theme(
          data: ThemeData.dark(), //다크 테마
          child: child!,
        );
      },
      if (picked != null) {
        setState(() => date = DateFormat('yyyy년 MM월 dd일').format(picked));
      }
      print(date);
    }

onPressed: () {
		_selectDate
                          }

이렇게 따로 선언하여 불러오는 식으로 사용하던가

아니면,

onPressed: () {
                        Future<DateTime?> selectedDate = showDatePicker(
                          context: context,
                          initialDate: DateTime.now(), // 초깃값
                          firstDate: DateTime(2018), // 시작일
                          lastDate: DateTime(2030), // 마지막일
                          builder: (BuildContext context, Widget? child) {
                            return Theme(
                              data: ThemeData.fallback(),
                              child: child!,
                            );
                          },
                        );
                        selectedDate.then((dateTime) {
                          if (dateTime != null) {
                            setState(() {
                              controTodo.datechange =
                                  DateFormat('yyyy년 MM월 dd일').format(dateTime);
                              selectedTime = dateTime;
                            });
                          }
                        });
                      },

버튼 클릭시에 바로 실행되도록 코드를 짤 수 있다.

🔗 참고

https://fronquarry.tistory.com/5

https://api.flutter.dev/flutter/material/showDatePicker.html